CSS 響應(yīng)式佈局：圖片與文本的完美結(jié)合

創(chuàng)建響應(yīng)式網(wǎng)頁佈局，讓圖片和文本在不同屏幕尺寸下都能完美呈現(xiàn)，是前端開發(fā)中的常見挑戰(zhàn)。本文將詳細(xì)講解如何利用CSS 的Flexbox 和媒體查詢，實現(xiàn)圖片和文本在較大屏幕上並排顯示，而在較小屏幕（例如手機）上則圖片在上、文本在下的效果。

需求背景

目標(biāo)是使用CSS 和Flexbox，構(gòu)建一個包含固定尺寸圖片(200x200 像素) 和一段文本的佈局。在大屏幕上，文本佔據(jù)剩餘空間；而在小屏幕上，圖片位於文本上方。

問題與解決：視口的重要性

之前的嘗試可能遇到佈局不隨屏幕寬度變化的問題，這通常是因為缺少視口（viewport）設(shè)置。視口是瀏覽器窗口中顯示網(wǎng)頁內(nèi)容的區(qū)域。正確的視口設(shè)置確保網(wǎng)頁在不同設(shè)備上正確渲染和縮放。

完整解決方案：HTML 和CSS 代碼

為了實現(xiàn)響應(yīng)式佈局，需要在部分添加視口meta 標(biāo)籤，並調(diào)整CSS 代碼：

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 佈局示例</title>
    <style>
        .container {
            display: flex;
        }

        .image {
            width: 200px;
            height: 200px;
        }

        .text {
            flex: 1; /* 占據(jù)剩余空間 */
        }

        /* 小屏幕媒體查詢 (例如手機) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 屬性，讓文本自適應(yīng)寬度 */
            }
        }
    </style>


    <div class="container">
        <div class="image">圖片</div>
        <div class="text">文本內(nèi)容</div>
    </div>

代碼解釋：

• meta name="viewport" ：設(shè)置視口，使頁面根據(jù)設(shè)備寬度進(jìn)行縮放。
• .container ：使用Flexbox 佈局。
• .image ：設(shè)置圖片尺寸。
• .text ： flex: 1;使文本佔據(jù)剩餘空間。
• @media (max-width: 600px) ：媒體查詢，在屏幕寬度小於600px 時，將flex-direction設(shè)置為column ，實現(xiàn)垂直佈局，並移除.text的flex屬性，讓文本內(nèi)容自適應(yīng)寬度。

通過以上設(shè)置，網(wǎng)頁佈局將根據(jù)屏幕尺寸自動調(diào)整，實現(xiàn)完美的響應(yīng)式效果。 記住，你可以根據(jù)實際需要調(diào)整max-width的值。

以上是如何使用 CSS 和 Flexbox 實現(xiàn)圖片和文本在不同屏幕尺寸下的響應(yīng)式佈局？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！