当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 【第七章 响应式设计】（概述）
- 7.1 移动端优先设计原则（上篇）
- 7.1.1 创建移动端菜单（下篇）
- 7.1.2 给视口添加 meta 标签（下篇）
- 7.2 媒体查询（上篇）
- 7.2.1 深入理解媒体查询的类型（上篇）
- 7.2.2 页面断点的添加（中篇）
- 7.2.3 响应式列的添加（下篇） ✔️
- 7.3 流式布局（待翻译 ⏳）
文章目录
- 7.2.3 响应式列的添加 Adding responsive columns
- 1 尽量精简媒体查询 Minimizing media queries
- 2 断点的选择 Breakpoint selection
《CSS in Depth》新版封面
译者按
学习了媒体查询的核心概念及写法、并实现了中等屏标题栏和主图部分的样式替换，剩下的就是正文区的三列布局效果了。在 7.2 这一节的下篇中，作者对前一版的内容做了部分调整，新加入了近年来媒体查询的一些最佳实践，同时将容器查询的相关知识做了重新规划（放到了后续章节），以确保大家学到的都是业内最新、最及时的响应式布局知识。一起来用心体会吧。
7.2.3 响应式列的添加 Adding responsive columns
最后一步是要为中等屏幕断点引入多列布局。与前面几章构建多列布局的方式一样，只是需要将这些样式放到一个媒体查询里，以免影响到小于这个断点尺寸的屏幕设备。
之前写示例页面的 HTML 标记时，我们在需要作三列布局的元素上设置了一个样式类 main。现在是启用它的时候了，将如下代码更新到本地样式表：
代码清单 7.11 媒体查询中的三列布局
@media (min-width: 650px) {
.main {
/* 定义一个包含三列的网格布局 */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.5em;
/* 限制网格宽度并水平居中 */
max-inline-size: 1400px;
margin-inline: auto;
}
}
然后尝试缩放浏览器的窗口大小，经过断点时会看到各列快速重新定位：宽度小于该断点时，这些元素没有特定样式，因此会按照常规文档流的行为特征自上而下进行排列；而当宽度超过该断点后，这些元素就会变成相应的弹性容器和弹性元素。
不少响应式设计最终都会遵循这样的思路：当设计要求元素并排放置时，多行并排只对大尺寸屏幕生效；在小尺寸屏中，则让各元素独占一行，填满整个屏幕宽度。这种方法适用于多列、文字旁的多张图片、或者在小尺寸屏下布局显得拥挤（cramped）的其他元素。
注意，代码清单 7.11 中的断点尺寸比之前设置的略宽，这里用的是 650px，因为三列布局在达到这个宽度时才开始显得拥挤。本例中，宽度不足 650px 时，每列就太窄了。设计时没必要在所有位置都恪守完全相同的断点尺寸。
Web 设计师 Brad Frost 整理了一份响应式页面布局的列表，可以访问 https://bradfrost.github.io/this-is-responsive/patterns.html 进行查看。响应式设计中的列非常灵活多变，比如设计成一宽一窄的组合、或者等宽列布局、双栏布局、三栏布局等等，不一而足。最终，这些列的布局都会使用与本章类似的方式实现，在列的具体组合或者列宽设置上略有不同。
1 尽量精简媒体查询 Minimizing media queries
样式表如果包含了很多大型媒体查询的样式块，可能会变得极其复杂。如果再来点 min-width 和 max-width 这样的组合查询，情况只会更糟。当不同屏幕尺寸都对应了多个不同的样式规则时，要一次性记住所有这些内容估计有点困难。
因此，要尽可能地让这些媒体查询块保持轻量与简短。其中一种做法是，在媒体查询外部使用自定义属性，并在媒体查询内因地制宜地进行修改。例如，可以考虑利用自定义属性来定义一个普通的间距尺寸，然后在更大的断点中进行放大：
:root {
--gap-size: 1rem;
}
@media (min-width: 560px) {
:root {
--gap-size: 1.5rem;
}
}
上述代码中的自定义属性可以在整个页面中使用，而这个轻量的媒体查询块将根据它生效的位置作相应的调整。还有一种方法也能让媒体查询块保持简短，就是在媒体查询块的外围设置网格布局，然后根据屏幕尺寸在媒体查询中重新定义网格的行或者列。
在很多情况下，可能根本不需要媒体查询，自然地换行就能实现响应式效果。通过在 Flexbox 布局中使用 flex-wrap: wrap 并设置合适的 flex-basis 来实现响应式就是个绝佳的解决方案。同理，在网格布局中使用 auto-fit 或者 auto-fill 的网格列，以便在换行前设置好一行放入几个元素，也有异曲同工之妙。
2 断点的选择 Breakpoint selection
本章开头介绍了如何实现简单的响应式元素，以便熟悉媒体查询的相关用法。大多数时候，您可能会先用断点来处理多列布局的设计。建议多试几次，直到找出适合页面布局的断点尺寸。只要确保各列在所选的断点位置不要过窄就行了。
有时候会忍不住想要根据设备来选择断点：这款 iPhone14 宽多少像素、那个平板设备又是多宽多大……不要总盯着设备不放。市面上有成百上千种设备和屏幕分辨率，根本无法逐一测试。相反，应该选择适合设计的断点，这样不管在什么设备上渲染，都能有很好的表现。
多年来，媒体查询一直是响应式设计的基础，但还有另一种与之相关的工具，人们称它为 容器查询（container query）。该工具可以根据容器元素的尺寸大小而非整个页面的大小来更改元素样式。我们将在第 10 章重点考察容器查询。
关于《CSS in Depth》（中译本书名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 读者评分 | 原版：4.7（亚马逊）；中文版：9.3（豆瓣） | 原版：5.0（亚马逊）；中文版：暂无，待出版 |
| 出版时间 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暂无，待出版 |
| 原价 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暂无，待出版 |
| 现价 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暂无，待出版 |
| 原版国内预订 | 起步价 ￥461.00 | 起步价 ￥750.00 |
本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：
- 第一章 层叠、优先级与继承（已完结）
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位（已完结）
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型（已完结）
- 3.1 常规文档流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.6 容器内的元素间距问题
- 3.7 本章小结
- 第四章 Flexbox 布局（已完结）
- 4.1 Flexbox 布局原理
- 4.2 弹性子元素的大小
- 4.3 弹性布局的方向
- 4.4 对齐、间距等细节处
- 4.5 本章小结
- 第五章 网格布局（已完结）
- 5.1 构建基础网格
- 5.2 网格结构剖析 （上）
- 5.2.1 网格线的编号（下）
- 5.2.2 网格与 Flexbox 配合（下）
- 5.3 两种替代语法
- 5.3.1 命名网格线
- 5.3.2 命名网格区域
- 5.4 显式网格与隐式网格（上）
- 5.4.1 添加变化 （中）
- 5.4.2 让网格元素填满网格轨道（下）
- 5.5 子网格（全新增补内容）
- 5.6 对齐相关的属性
- 5.7 本章小结
- 第六章 定位与堆叠上下文（已完结）
- 6.1 固定定位
- 6.1.1 创建一个固定定位的模态对话框
- 6.1.2 在模态对话框打开时防止屏幕滚动
- 6.1.3 控制定位元素的大小
- 6.2 绝对定位
- 6.2.1 关闭按钮的绝对定位
- 6.2.2 伪元素的定位问题
- 6.3 相对定位
- 6.3.1 创建下拉菜单（上）
- 6.3.2 创建 CSS 三角形（下）
- 6.4 堆叠上下文与 z-index
- 6.4.1 理解渲染过程与堆叠顺序（上）
- 6.4.2 用 z-index 控制堆叠顺序（上）
- 6.4.3 深入理解堆叠上下文（下）
- 6.5 粘性定位
- 6.6 本章小结
