响应式设计：让网站适配所有设备

移动设备流量已超过桌面，网站必须在各种屏幕上都好用。响应式设计（Responsive Design）让一套代码适配所有设备。

一、viewport 设置

HTML 头部必须加这行，否则手机上会按桌面宽度缩放：

二、媒体查询

/* 默认（移动端）样式 */
.container { padding: 12px; }

/* 屏幕宽于 768px 时（平板/桌面） */
@media (min-width: 768px) {
  .container { padding: 24px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

推荐"移动优先"策略：默认写移动端样式，用 min-width 媒体查询向大屏渐进增强。这样代码更简洁。

三、相对单位

• rem：相对根字号，整体缩放方便
• vw / vh：视口宽/高的 1%，做全屏布局
• %：相对父元素
• em：相对自身字号（嵌套要小心）

四、响应式图片

/* 防止图片溢出 */
img { max-width: 100%; height: auto; }

/* 根据屏幕加载不同图 */
picture {
  source: url(small.jpg) 1x;
  source: url(large.jpg) 2x;
}

五、flex/grid 自适应

Grid 的 auto-fit 让卡片自动换行，无需媒体查询：

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

六、断点参考

• 手机：< 768px
• 平板：768px - 1024px
• 桌面：> 1024px
• 大屏：> 1440px（可选）

七、测试工具

Chrome DevTools 的设备模拟器（F12 → 切换设备图标）是测试响应式的神器，能模拟各种手机平板。

八、小结

响应式已是现代网站的基本要求。核心是：viewport + 媒体查询 + 相对单位 + 弹性布局。掌握这些，网站就能优雅地适配任何屏幕。