跟着 MDN 学CSS day_46：（响应式实战——用媒体查询打造双列布局）

作为前端开发者，掌握响应式网页设计（Responsive Web Design）是至关重要的一项基本功。它要求我们的网页能够优雅地适应各种屏幕尺寸，从手机、平板到桌面显示器，为用户提供最佳的浏览体验。今天，我们将通过完成MDN上的一个经典技能测试任务，来深入实践CSS媒体查询（Media Queries）与现代布局技术的结合使用。这个任务的目标非常明确：为一个移动端优先设计的线框稿网站，创建一个适应宽屏幕的桌面版本布局。

在深入代码之前，我们需要先理解一个核心的设计理念：移动优先（Mobile First）。观察任务提供的起始CSS和HTML，你会发现，在没有编写任何媒体查询的情况下，网页在窄视口下已经呈现为一个结构清晰的单列布局。标题、导航、文章内容、卡片列表以及侧边栏都垂直堆叠，阅读起来没有任何障碍。这就是移动优先的起点。我们的工作，是当浏览器视口足够宽时，利用媒体查询去增强布局，而不是为移动端和桌面端分别编写完全独立的样式。这种策略能让代码更简洁、性能更优。

本文将详细拆解如何从一个单列的移动端布局，逐步演变成一个包含灵活导航、多列内容区和卡片网格的桌面端布局。我们将遵循MDN评分解读中推荐的最佳实践，使用Flexbox和Grid布局，只用一个断点就优雅地完成所有转变。

1. 设定核心断点：使用 min-width 拥抱移动优先

媒体查询的编写方式直接反映了你的开发哲学。有两种主要思路：一种是使用 max-width，为桌面端编写一套完整的样式，然后通过媒体查询为更小的屏幕覆盖样式；另一种是使用 min-width，先写好移动端的基础样式，再通过媒体查询为更大的屏幕添加增强样式。

在本任务中，我们坚定地采用后者，即 min-width 的策略。这完美契合移动优先的原则。我们需要找到一个合适的屏幕宽度作为"断点"，当视口宽度达到或超过这个值时，就应用桌面布局。

根据评分解读的示范，我们将断点设置在 60em。em 单位在媒体查询中基于用户浏览器的默认字体大小（通常是16px），因此 60em 大约等于 960px。这个宽度足够容纳一个双列甚至更复杂的布局，同时也能覆盖大部分平板电脑的横屏模式和桌面显示器。

示例代码

css 复制代码

/* 这是移动端的基础样式，对所有设备生效 */
/* ... 此处是原有的所有CSS规则 ... */

/* 当视口宽度大于等于60em时，应用以下增强样式 */
@media screen and (min-width: 60em) {
  /* 我们将在这里编写桌面布局的代码 */
}

详细讲解

这行 @media screen and (min-width: 60em) 是整个响应式设计的开关。它的逻辑是："当输出媒介是屏幕，且宽度至少为60em时，应用大括号内的CSS规则。" 请注意，我们没有为 60em 以下的宽度编写任何媒体查询，因为那些设备的样式就是我们的基础CSS。这种结构避免了样式冲突和优先级覆盖的问题，维护起来更加清晰。所有的桌面端新规则都被安全地包裹在这个条件块中，它们只会在条件满足时被激活，而不会影响到移动端的默认表现。

2. 重构导航栏：利用Flexbox实现两端对齐

在移动端布局中，网站标题"My Website"和下方的导航链接列表是垂直堆叠的，每个链接之间有边框分隔。这种设计在小屏幕上点击区域大，体验很好。但在宽屏幕上，这种布局占用了过多的垂直空间，显得效率低下。桌面端常见的模式是将标题和导航放在同一行，标题居左，导航居右，形成一个顶部的导航栏。

这里的主角是Flexbox。Flexbox专为在一维空间内排列和对齐项目而设计，特别适合处理导航栏这种场景。

示例代码

css 复制代码

@media screen and (min-width: 60em) {
  header {
    display: flex; /* 将header设置为flex容器，其直接子元素(.title和nav)会横向排列 */
    justify-content: space-between; /* 将子元素分别推到容器的两端 */
    align-items: center; /* 在垂直方向上居中对齐子元素 */
  }
  
  header ul {
    display: flex; /* 将ul也设置为flex容器，让li元素横向排列 */
  }
  
  header a {
    border-top: 0; /* 移除移动端链接顶部的分隔线 */
  }
}

详细讲解

我们为 header 元素应用了 display: flex，这瞬间让它的两个子元素------包含标题的 .title 和 nav 元素------从左到右排列。justify-content: space-between 属性将第一个子元素推到最左边，最后一个子元素推到最右边，中间的空间均匀分布，完美实现了标题和导航的两端对齐。align-items: center 确保即使标题和导航高度不同，它们也能在垂直中心线上对齐。

对于 nav 内部的 ul，我们也应用 display: flex，这清除了列表默认的垂直堆叠样式，让它的子元素 li 们肩并肩地排列在一行，形成一个典型的横向导航菜单。最后，header a { border-top: 0; } 这行代码移除了移动端用来分隔各链接项的顶部边框，因为横向排列的链接之间已经不需要这些边框来区分了。

3. 构建主体双列布局：用Grid打造稳健的内容与侧栏结构

页面主体部分 main 包含了文章 article 和侧边栏 aside.sidebar。移动布局中，它们自然垂直堆叠。在桌面端，我们希望将主要内容放在左侧占据较大宽度，侧边栏放在右侧占据较小宽度，形成经典的双列布局。

虽然Flexbox也能实现双列，但对于这种二维的页面结构布局，CSS Grid是更强大、更直观的工具。Grid允许我们明确地定义行和列，将元素精确地放入我们创建的网格轨道中。

示例代码

css 复制代码

@media screen and (min-width: 60em) {
  main {
    display: grid; /* 将main设置为grid容器 */
    grid-template-columns: 3fr 1fr; /* 创建两列，第一列占3份宽度，第二列占1份宽度 */
    gap: 20px; /* 设置网格轨道之间的间距为20px */
    margin-top: 20px; /* 为内容区和上方的导航栏增加一些间距 */
  }
}

详细讲解

display: grid 魔法般地启动了一个网格布局上下文。main 元素的直接子元素 article 和 aside 会自动成为网格项。

grid-template-columns: 3fr 1fr; 是这里最精妙的部分。它定义了两列的宽度。fr 是Grid布局中引入的新单位，代表"可用空间的一份"。3fr 1fr 意味着浏览器会将 main 元素的可用宽度分成4份，第一列（article）占据其中的3份，即75%的宽度；第二列（aside）占据1份，即25%的宽度。这种比例分配是响应式的，因为 fr 单位基于剩余空间动态计算，所以无论父容器宽度如何变化，这个 3：1 的宽度比例始终不变，非常健壮。

gap: 20px 属性在行与列之间创建了20像素的间距，避免了文章内容和侧边栏直接紧贴在一起，提升了视觉舒适度。

4. 打造卡片自适应网格：让卡片从单列跃迁到多列

.cards 列表在移动端是一条条垂直排列的卡片，在宽屏幕上，将它们并排显示能更有效地利用水平空间。我们的目标是让五张卡片在一行内尽可能多地显示，但又不至于太拥挤。三列布局是一个平衡信息密度和可读性的绝佳选择。

这又是CSS Grid大展身手的地方。我们可以在 .cards 元素上使用与 main 相同的Grid技术，但这次是创建一个三列的网格。

示例代码

css 复制代码

@media screen and (min-width: 60em) {
  .cards {
    display: grid; /* 将卡片列表设置为grid容器 */
    grid-template-columns: 1fr 1fr 1fr; /* 创建一个等宽的三列网格 */
    gap: 20px; /* 设置网格轨道之间的间距 */
  }
}

详细讲解

通过将 display: grid 应用于 .cards 列表，其下的 li 元素立刻从块级元素转变为网格项，告别了垂直堆叠。grid-template-columns: 1fr 1fr 1fr; 明确告诉浏览器创建三个等宽的列轨道。每个 1fr 表示这三列将均分父容器的所有可用空间。这与固定像素宽度不同，这个网格是天生自适应的。

加上 gap: 20px 之后，一个整洁、规整的卡片网格就生成了。前三个卡片会完美地填充第一行，剩下的两个卡片会自动流入下一行，并占据前两列的位置。Grid布局的智能之处在于，我们无需指定行，它会隐式地创建新行来容纳溢出的项目，其高度由内容决定。

总结

通过以上四步，我们就在一个媒体查询块中，使用Flexbox和Grid这两种现代布局利器，将一个简单的移动端线框稿，转变成了一个功能齐全、结构清晰的桌面端网页布局。整个过程代码量少，逻辑清晰，完美体现了移动优先和响应式设计的精髓。这个技能测试不仅是媒体查询的应用，更是对你CSS布局整体驾驭能力的一次综合检验。

步骤	目标	技术	关键属性
断点设定	区分移动端与桌面端	媒体查询	`@media screen and (min-width: 60em)`
导航重构	标题与导航水平两端对齐	Flexbox	`display: flex`, `justify-content: space-between`
双列布局	主内容区与侧边栏3:1排列	CSS Grid	`grid-template-columns: 3fr 1fr`
卡片网格	卡片等宽三列自适应	CSS Grid	`grid-template-columns: 1fr 1fr 1fr`

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！