CSS 响应式设计

响应式设计的目标是让页面在不同设备、分辨率和交互方式下都可用、可读、可维护。

1. 媒体查询（Media Query）

/* 手机 */
@media (max-width: 767px) {
  .container {
    padding: 12px;
  }
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    width: 200px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .sidebar {
    width: 280px;
  }
}

常见媒体类型：all、screen、print。

2. 常见媒体特性

@media (orientation: portrait) { }
@media (orientation: landscape) { }
@media (hover: hover) { }
@media (hover: none) { }
@media (pointer: fine) { }
@media (pointer: coarse) { }

• min-width / max-width：最常见断点控制
• orientation：竖屏 / 横屏
• hover / pointer：区分鼠标与触屏交互能力

3. 移动优先（Mobile First）

推荐先写小屏默认样式，再通过 min-width 逐步增强：

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

4. 弹性容器与流式宽度

.container {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

img,
video {
  max-width: 100%;
  height: auto;
}

• 使用 max-width: 100% 避免媒体溢出
• 使用 min() / max() / clamp() 增强自适应能力

5. 响应式排版

:root {
  --text-base: clamp(14px, 1.2vw, 18px);
  --title-lg: clamp(24px, 3vw, 40px);
}

body {
  font-size: var(--text-base);
}

h1 {
  font-size: var(--title-lg);
}

clamp(min, preferred, max) 能减少断点数量，让字体平滑缩放。

6. 现代响应式布局技巧

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

repeat(auto-fit, minmax()) 可根据可用空间自动调整列数。

7. 可访问性相关媒体查询

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --text: #f9fafb;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

• prefers-color-scheme：系统深浅色偏好
• prefers-reduced-motion：降低动画强度

8. 常见断点建议（仅参考）

• <= 767px：手机
• 768px - 1023px：平板
• >= 1024px：桌面

断点应基于内容“何时开始破版”来定，不要机械套模板。

9. 调试建议

• 使用 Chrome DevTools / Firefox Responsive Mode 模拟设备
• 关注横屏、缩放、弱网和低性能设备体验
• 真机验证触摸区域、输入法遮挡、滚动行为