響應(yīng)式布局是指網(wǎng)頁能夠自動適應(yīng)不同設(shè)備（PC、平板、手機等）的屏幕尺寸，提供最佳瀏覽體驗。
方案 實現(xiàn)方式 優(yōu)點 缺點 適用場景
| 方案 | 實現(xiàn)方式 | 優(yōu)點 | 缺點 | 適用場景 |
|---|---|---|---|---|
| 媒體查詢 | 通過 @media 檢測屏幕寬度 | 精準(zhǔn)控制不同斷點樣式 | 需維護多套代碼 | 傳統(tǒng)項目、舊瀏覽器兼容 |
| Flexbox 布局 | display: flex + flex-wrap | 簡單靈活，自動換行 | 一維布局 導(dǎo)航欄、卡片列表 | |
| CSS Grid 布局 | display: grid + auto-fit | 二維布局能力強大 | 舊瀏覽器兼容差 | 復(fù)雜網(wǎng)格布局（如儀表盤） |
| 百分比布局 | 使用 % 單位 | 流式適配簡單 | 嵌套計算復(fù)雜 | 全屏輪播圖、側(cè)邊欄 |
| 視口單位(vw/vh) | width: 50vw;height: 50vh | 直接關(guān)聯(lián)屏幕尺寸 | 小屏可能過小 | 全屏背景、字體適配 |
| 響應(yīng)式圖片 | srcset + sizes | 按需加載高清圖 | 需多套圖片資源 | 高分辨率屏幕適配 |
| CSS 變量(Custom Properties) | --main-color: red+ 媒體查詢 | 動態(tài)修改全局樣式 | 舊瀏覽器不支持 | 主題切換、統(tǒng)一配置 |
| 容器查詢(Container Queries) | @container 檢測容器尺寸 | 組件級響應(yīng)式 | 僅最新瀏覽器支持 | 獨立組件開發(fā) |
