CSS 响应式设计 — 适配手机
CSS 响应式设计 · 难度：进阶 · +15XP
CSS 响应式设计
响应式Web设计（Responsive Web Design）使网页能在不同设备（桌面、平板、手机）上自动适配布局和样式，提供最佳浏览体验。CSS通过视口（viewport）、媒体查询（media queries）和弹性布局三大核心实现响应式。
设置视口 Viewport
在HTML的<head>中添加viewport meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这样可以告诉移动浏览器按设备实际宽度渲染页面，而不是缩小显示桌面版。
媒体查询 @media
媒体查询是最强大的响应式工具，可以根据设备特性（宽度、高度、方向等）应用不同的CSS规则。
/* 手机端（宽度小于 768px） */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
padding: 10px;
}
h1 { font-size: 1.5rem; }
}
/* 平板端（768px - 1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
max-width: 90%;
}
}
/* 桌面端（宽度大于 1024px） */
@media screen and (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
常见断点（Breakpoints）
| 设备类型 | 屏幕宽度 | 断点 |
|---|---|---|
| 手机（竖屏） | 320px - 480px | max-width: 480px |
| 手机（横屏） | 480px - 768px | max-width: 768px |
| 平板 | 768px - 1024px | max-width: 1024px |
| 小桌面 | 1024px - 1280px | max-width: 1280px |
| 大桌面 | 1280px+ | min-width: 1280px |
响应式图片
img {
max-width: 100%;
height: auto; /* 保持宽高比 */
}
/* 使用srcset提供不同分辨率图片 */
<img src="photo-small.jpg"
srcset="photo-small.jpg 480w, photo-med.jpg 800w, photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw, 50vw"
alt="响应式图片">
移动优先 vs 桌面优先
| 策略 | 方法 | 优点 |
|---|---|---|
| 移动优先 | 先写移动端样式，再用 min-width 叠加 | 性能更好，代码更简洁 |
| 桌面优先 | 先写桌面端样式，再用 max-width 覆盖 | 设计先行，适合重桌面站点 |
/* 移动优先示例 */
.grid { display: block; } /* 默认移动端 */
@media (min-width: 768px) {
.grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}???? 练习
- 创建一个在手机上单列、平板上两列、桌面上四列的网格布局
- 使用 max-width: 100% 让所有图片自动响应缩放
- 为导航栏添加媒体查询，手机端显示汉堡菜单，桌面端显示完整横排
- 使用 srcset 为一张图片提供三种分辨率版本
- 尝试移动优先的方式重写一个现有页面