响应式设计：媒体查询、相对单位

用移动优先的思路、媒体查询以及 rem、%、vw 单位，让你的界面适配各种屏幕尺寸。

9 分钟 · 3 题

专业的做法是移动优先：你先写小屏幕的样式，然后随着空间增大，用 min-width 媒体查询逐步增强布局。基础 CSS 保持简洁，而每个断点只添加真正发生变化的部分。

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

至于单位，排版一律禁用像素。1rem 等于根元素的字号（默认 16px），而且最重要的是，它尊重用户在浏览器里选择的文字大小设置。一位把字号设为 20px 的视障用户会看到你整个网站按比例放大——前提是你用了 rem。

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

对于宽度，要组合使用相对单位：% 用来占据父元素的一部分，max-width 用来在大屏上给它设上限，vw 用于与视口宽度挂钩的尺寸（1vw 等于其 1%）。clamp(min, ideal, max) 函数能创建无需任何媒体查询就能自适应的流动值——非常适合大标题。

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

知识检测

确认你已牢记本课的重点内容。

1. 在移动优先的做法中，你用哪条媒体查询来针对大屏幕？
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. 默认情况下，1rem 对应什么？
   • 10 像素，CSS 标准里的一个固定值
   • 父元素的字号
   • 根元素的字号，默认 16px
3. 50vw 等于多少？
   • 视口宽度的 50%
   • 父元素宽度的 50%
   • 50 像素，与窗口无关