响应式布局
2025-03-27 本文已影响0人
书虫和泰迪熊
响应式布局是指网页能够自动适应不同设备（PC、平板、手机等）的屏幕尺寸，提供最佳浏览体验。
方案 实现方式 优点 缺点 适用场景
| 方案 | 实现方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 媒体查询 | 通过 @media 检测屏幕宽度 | 精准控制不同断点样式 | 需维护多套代码 | 传统项目、旧浏览器兼容 |
| Flexbox 布局 | display: flex + flex-wrap | 简单灵活，自动换行 | 一维布局 导航栏、卡片列表 | |
| CSS Grid 布局 | display: grid + auto-fit | 二维布局能力强大 | 旧浏览器兼容差 | 复杂网格布局（如仪表盘） |
| 百分比布局 | 使用 % 单位 | 流式适配简单 | 嵌套计算复杂 | 全屏轮播图、侧边栏 |
| 视口单位(vw/vh) | width: 50vw;height: 50vh | 直接关联屏幕尺寸 | 小屏可能过小 | 全屏背景、字体适配 |
| 响应式图片 | srcset + sizes | 按需加载高清图 | 需多套图片资源 | 高分辨率屏幕适配 |
| CSS 变量(Custom Properties) | --main-color: red+ 媒体查询 | 动态修改全局样式 | 旧浏览器不支持 | 主题切换、统一配置 |
| 容器查询(Container Queries) | @container 检测容器尺寸 | 组件级响应式 | 仅最新浏览器支持 | 独立组件开发 |
