css 響應式布局：圖片與文本的完美結合
創建響應式網頁布局，讓圖片和文本在不同屏幕尺寸下都能完美呈現，是前端開發中的常見挑戰。本文將詳細講解如何利用 CSS 的 flexbox 和媒體查詢，實現圖片和文本在較大屏幕上并排顯示，而在較小屏幕（例如手機）上則圖片在上、文本在下的效果。
需求背景
目標是使用 CSS 和 Flexbox，構建一個包含固定尺寸圖片 (200×200 像素) 和一段文本的布局。在大屏幕上，文本占據剩余空間；而在小屏幕上，圖片位于文本上方。
問題與解決：視口的重要性
之前的嘗試可能遇到布局不隨屏幕寬度變化的問題，這通常是因為缺少視口（viewport）設置。視口是瀏覽器窗口中顯示網頁內容的區域。正確的視口設置確保網頁在不同設備上正確渲染和縮放。
完整解決方案：html 和 CSS 代碼
為了實現響應式布局，需要在
部分添加視口 meta 標簽，并調整 CSS 代碼：
立即學習“前端免費學習筆記（深入）”；
<!DOCTYPE html> <html> <head> <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> </head> <body> <div class="container"> <div class="image">圖片</div> <div class="text">文本內容</div> </div> </body> </html>
代碼解釋：
- meta name=”viewport”：設置視口，使頁面根據設備寬度進行縮放。
- .container：使用 Flexbox 布局。
- .image：設置圖片尺寸。
- .text：flex: 1; 使文本占據剩余空間。
- @media (max-width: 600px)：媒體查詢，在屏幕寬度小于 600px 時，將 flex-direction 設置為 column，實現垂直布局，并移除 .text 的 flex 屬性，讓文本內容自適應寬度。
通過以上設置，網頁布局將根據屏幕尺寸自動調整，實現完美的響應式效果。 記住，你可以根據實際需要調整 max-width 的值。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
