【CSS in Depth 2 精译_048】7.2 CSS 响应式设计中的媒体查询原则（中）：页面断点（breakpoint）样式的添加

当前内容所在位置（可进入专栏查看其他译好的章节内容）

【第七章响应式设计】（概述）
7.1 移动端优先设计原则（上篇）
7.1.1 创建移动端菜单（下篇）
7.1.2 给视口添加 meta 标签（下篇）

7.2 媒体查询（上篇）
7.2.1 深入理解媒体查询的类型（上篇）
7.2.2 页面断点的添加（中篇） ✔️
7.2.3 响应式列的添加（下篇，待翻译 ⏳）

文章目录

- - 7.2.2 页面断点的添加 Adding breakpoints to the page

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
继本专栏上一篇（即第【047】篇）系统介绍了 CSS 媒体查询的相关概念、主要类型、各种组合式写法后，本篇将结合具体的示例页面，详细讲解媒体查询在中等屏幕样式设计中的用法。篇幅虽然不长，但最好也跟随作者的讲解在本地实际操作一遍（代码详见本篇绑定资源中的压缩包文件），这才是“拿来主义”的正确打开方式……

7.2.2 页面断点的添加 Adding breakpoints to the page

通常，采用移动端优先的设计方案也意味着最常用的媒体查询类型应该是 min-width。在任何媒体查询之前，最先写的应该是移动端样式，接着再逐步过渡到更大的断点样式上。整体结构如代码清单 7.8 所示（先别急着将下面的代码加入页面）。

代码清单 7.8 响应式 CSS 的通用整体结构

.title { /* 移动端样式，对所有断点生效 */...
}@media (min-width: 35em) { /* 中等屏断点，覆盖对应的移动端样式 */.title {...}
}@media (min-width: 50em) { /* 大屏断点，覆盖对应的小屏及中等屏断点的样式 */.title {...}
}

最先生效的样式是移动端样式，因为它们不在媒体查询里，故而对所有断点都生效；其次生效的是对应中等屏幕的媒体查询，其样式规则基于移动端样式构建，并且会覆盖相应的移动端样式；最后才是针对大尺寸屏的媒体查询，在这里完成最后的样式添加。

有的设计可能只需要一个断点，有的则需要多个。对于页面上的许多元素而言，也无需给每个断点都设计样式，因为对中小屏适用的断点样式在大尺寸屏也同样会生效。

有时候移动端的样式可能会很复杂，在大一些的断点里可能需要花很大篇幅去覆盖现有样式，此时就要将这些样式放到以 max-width 为过滤条件的媒体查询中，这样就只对尺寸较小的断点生效。但是 max-width 媒体查询用多了也可能是没有严格遵循移动端优先设计的结果。max-width 媒体查询通常只是用于排除某些例外情况，而非惯用手法。

接下来给中等屏幕断点添加样式。在较大的屏幕上，可用空间较多，布局可以适当宽松一些。在代码清单 7.9 中，先是给标题区和主内容区设置了更大的内边距，然后单独给主图区加大了内边距，使其更加吸睛，同时也给页面带来了更多视觉上的趣味性。导航菜单不必隐藏了，汉堡图标也不需要了，菜单项就让它们一直显示出来（详见代码清单 7.10）。最终可以将主内容区设计为三列布局（详见代码清单 7.11）。如此一来，页面效果将如图 7.8 所示：

图 7.8 中等屏幕断点下的页面效果

【图 7.8 中等屏幕断点下的页面效果】

有些改动显而易见，比如适当增大了内边距和字号。通常，最好每次按照相关选择器的规则立即修改对应的样式。简单起见，这些改动都合并到了代码清单 7.9 中。将下列代码加入您的样式表。

代码清单 7.9 中等屏幕断点下的内边距及字体样式调整

.page-header {padding: 0.4em 1em;background-color: #fff;
}@media (min-width: 560px) {.page-header {padding: 1em; /* 增加标题的内边距 */}
}.hero {padding: 2em 1em;text-align: center;background-image: url(coffee-beans.jpg);background-size: 100%;color: #fff;text-shadow: 0.1em 0.1em 0.3em #000;
}@media (min-width: 560px) {.hero {/* 增加主图的内边距及字号 */padding: 5em 3em; font-size: 1.2rem;}
}main {padding: 1em;
}@media (min-width: 560px) {main {padding: 2em 1em; /* 增加主元素的内边距 */}
}

务必确保每个媒体查询都位于其所要覆盖的样式之后，这样其内部的样式才会有更高的优先级。将浏览器从窄变宽，看看视口宽度达到 560px 时上述变更是否生效。

注意

务必将媒体查询放在需要覆盖的任何样式之后，以确保其样式能覆盖具有相同选择器优先级的其余样式。

接下来处理菜单样式。菜单将涉及两处变更：首先，要将下拉菜单的打开和关闭行为移除掉，这样才能始终可见；其次，要将菜单从之前的垂直排列改为水平排列布局。将代码清单 7.10 中的媒体查询代码添加到之前写的 .menu 和 .nav-menu 样式后面。最后，再次确保这些媒体查询样式的位置要放在对应的移动端样式后面，以便根据实际需要覆盖掉它们。

代码清单 7.10 为中等屏幕断点重构导航菜单样式

@media (min-width: 560px) {.menu-toggle {display: none; /* 隐藏切换按钮 */}.menu-dropdown {display: block; /* 显示下拉菜单项 */position: static; /* 覆盖绝对定位 */}
}@media (min-width: 560px) {.nav-menu { /* 将菜单改为弹性容器，并让菜单项延展至填满屏幕宽度 */display: flex;border: 0;padding-inline: 1em;}.nav-menu > li {flex: 1; /* 将菜单改为弹性容器，并让菜单项延展至填满屏幕宽度 */}.nav-menu > li + li {border: 0;}.nav-menu > li > a {padding: 0.3em;text-align: center;}
}

虽然前面为了适配移动端布局设置了很多复杂的样式规则，但覆盖这些样式让布局恢复到静态块级元素（static, block-level element）却没那么复杂。例如移动端样式中的 top、left 及 right 值就无需调整，因为它们对静态定位（static positioning）元素不生效。

用 Flexbox 布局处理列表项是个很不错的解决方案，它可以让各列表项延展到填满可用空间。菜单元素的内边距也同其他元素一样来进行调整，只不过这里变成了缩小内边距。在中等屏幕断点下，可以假定用户没在小尺寸屏的手机上访问页面，故而也无需设置当时那么大的可点击区域。

关于《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 本章小结