如何使用 CSS 和 Flexbox 實現圖片和文本在不同屏幕尺寸下的響應式佈局？

CSS 響應式佈局：圖片與文本的完美結合

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

需求背景

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

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

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

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

為了實現響應式佈局，需要在部分添加視口meta 標籤，並調整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; /* 占据剩余空间 */
        }

        /* 小屏幕媒体查询 (例如手机) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 属性，让文本自适应宽度 */
            }
        }
    </style>


    <div class="container">
        <div class="image">圖片</div>
        <div class="text">文本內容</div>
    </div>

代碼解釋：

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

通過以上設置，網頁佈局將根據屏幕尺寸自動調整，實現完美的響應式效果。 記住，你可以根據實際需要調整max-width的值。

以上是如何使用 CSS 和 Flexbox 實現圖片和文本在不同屏幕尺寸下的響應式佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！