响应式设计与现代 CSS

这一课你将能做到

1. 使用媒体查询（Media Queries）和容器查询（Container Queries）为不同视口和组件状态编写自适应样式
2. 使用 clamp()、min()、max() 实现流体排版与弹性间距，摆脱「为每个断点写固定值」的繁琐
3. 结合 prefers-color-scheme 和 CSS 自定义属性，实现跟随系统主题的自动深色模式

为什么要学

用户访问 CodeForge 的设备可能是 27 寸 4K 显示器、13 寸笔记本、iPad 平板或 6 寸手机。响应式设计不是「让网页在手机上能看」，而是「让同一份代码在任何尺寸下都提供最优体验」。媒体查询是传统答案，但它基于视口宽度，无法解决「侧边栏内的组件在宽窄两种状态下的表现」这类组件级问题。

现代 CSS 提供了更精细的工具：clamp() 让字体大小在最小值和最大值之间平滑过渡；容器查询让组件根据所在容器宽度而非视口宽度调整样式；prefers-color-scheme 自动适配系统明暗主题。掌握这些技术，你能写出更简洁、更健壮的样式代码。

先建立图像

响应式设计的三个层次：

1. 流体排版：字号和间距随视口平滑缩放（clamp）
   font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1.125rem);

2. 容器查询：组件根据所在容器宽度自适应（@container）
   @container (min-width: 400px) { .card { flex-direction: row; } }

3. 媒体查询：页面根据视口宽度切换布局（@media）
   @media (min-width: 768px) { .layout { grid-template-columns: 250px 1fr; } }

现代最佳实践：优先使用流体排版和容器查询，媒体查询处理宏观布局切换。

跟着做

步骤 1：流体排版与弹性间距

创建 responsive.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式设计练习</title>
  <style>
    :root { --primary: #2563eb; --surface: #fff; --text: #0f172a; --text-muted: #64748b; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; background: #f1f5f9; color: var(--text); line-height: 1.6; }
    .hero-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; }
    .container { padding-inline: clamp(1rem, 0.5rem + 2vw, 3rem); max-width: 1200px; margin-inline: auto; }
    .hero { text-align: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem); background: linear-gradient(135deg, #eff6ff, #f5f3ff); }
    .hero p { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); color: var(--text-muted); max-width: 560px; margin: 1rem auto 0; }
  </style>
</head>
<body>
  <section class="hero">
    <div class="container">
      <h1 class="hero-title">响应式前端开发</h1>
      <p>一套代码，适配所有设备。从手机到桌面，从窄屏到宽屏，体验始终如一。</p>
    </div>
  </section>
</body>
</html>

保存后打开，拖动浏览器窗口宽度，观察字号和内边距如何平滑变化。clamp(min, preferred, max) 的含义：最终值不低于 min，不高于 max，中间按 preferred（通常含 ）计算。