CSS 响应式设计
css · intermediate · 25-30 min · Step 1/6响应式设计
响应式设计让网页在不同设备（手机、平板、桌面）上都有良好体验。
核心工具：媒体查询
/* 移动优先（默认样式 = 手机） */
.container {
padding: 16px;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container { padding: 32px; }
}
/* 桌面 */
@media (min-width: 1024px) {
.container { padding: 48px; }
}
移动优先 vs 桌面优先
| 策略 | 基础样式 | 媒体查询方向 |
|---|---|---|
| 移动优先 | 手机样式 | min-width（向上扩展） |
| 桌面优先 | 桌面样式 | max-width（向下缩减） |
推荐移动优先：代码更简洁，性能更好（手机先加载最少的样式）。
Viewport Meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码告诉浏览器按设备宽度渲染，没有它，手机会显示桌面版缩小后的页面。