当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第一章 层叠、优先级与继承（已完结）
- 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 本章小结
- 第七章 响应式设计（概述）
- 【7.1 移动端优先设计原则】（上篇） ✔️
- 7.2 媒体查询（精译中 ⏳）
文章目录
- 7.1 移动端优先设计原则 Mobile first
《CSS in Depth》新版封面
译者按
铺垫了好几天，今天终于要开始学习 CSS 响应式设计的第一个大原则了——移动端优先（mobile first）。第七章有个特点——每一节篇幅都比较长，因为涉及整个页面的谋篇布局和响应式处理，不再仅仅聚焦于一个个具体的知识点上，学习时一定要在头脑里构建一个宏观的视角。篇幅原因，本节拟分上下两篇进行介绍，本篇为上篇，对应 7.1 节的概述部分。只要跟着作者的思路进行本地实战演练，其实也没有想象中的那么抽象。一起加油吧！
7.1 移动端优先设计原则 Mobile first
响应式设计的第一原则就是 移动端优先（mobile first），顾名思义，就是移动端布局的构建要先于桌面端布局。这是确保两个版本都能生效的最佳方案。
开发移动端页面就像戴着脚镣跳舞：除了屏幕大小受限、网速偏慢外，页面交互所使用的控件（controls）也和 PC 端不太一样：虽然可以打字，但总感觉不太顺手，更没法将鼠标悬停在元素上触发一些特定效果。倘若一开始就设计一个功能全面的网站，然后企图根据移动端的诸多限制削减某些功能，这么做往往都会以失败告终。
而选用移动端优先的方式，则会让您在网站设计之初就开始考虑这些制约因素。一旦解决了移动端的用户体验问题（至少做了相关规划），后续就可以通过“渐进式增强（progressive enhancement）”技术去改善大尺寸屏幕用户的交互体验。
本章最终要实现的页面效果如图 7.1 所示。没错，这就是一版移动端的页面设计。
【图 7.1 待实现的移动端页面设计效果图】
该页面有三个主要部件：标题栏（header）、带了些文字内容的页面主图（hero image）、以及主内容区（main content）。要是轻触或单击页面右上角那个图标，还能弹出一个隐藏菜单（如图 7.2 所示）。这个由三条横线组成的图标因为形似汉堡包中的面包和肉饼，通常也被称作 汉堡（hamburger） 图标。
【图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果】
移动端布局一般是很朴素的设计。除了这个带交互效果的菜单，移动端更侧重于内容的展示。相对于大屏有大块的空间来布局标题栏、页面主图和菜单区，移动端用户往往浏览网页的目的性更强。他们很可能与友人在户外玩耍，只想快速查到商店营业时间或者像价格、地址这样的具体信息。
因此移动端的设计就是围绕内容展开的。试想有这么一个 PC 端页面，一边设计为文章内容，另一边则是包含链接的侧边栏，里面还有些不太重要的内容。要是换到移动端来，肯定是希望先看到文章内容。换句话说，我们希望最重要的内容先出现在 HTML 里。这一点恰好与页面可访问性关注的焦点不谋而合：一款读屏工具会优先读到“重要的内容（good stuff）”；或者让用户通过键盘操作，率先获取到这篇文章中的链接，其次才是侧边栏里的。
话虽如此，上述原则也并非放之四海而皆准。比如上面谈到的示例页，尽管页面主图没有下方的内容重要，但它不失为整个页面最抢眼的部分，因此考虑将其留在页面顶部的位置也是合理的。另外，它还带有少量文字内容，浏览起来也不费工夫。
重点
做响应式设计时，一定要确保 HTML 里涵盖了各种屏幕尺寸所需的全部内容。每个屏幕尺寸固然可以有各自的 CSS 样式，但它们必须共享同一份 HTML。
再来看看稍大一些的视口（viewport）该如何设计。屏幕较小的移动端布局固然要先行，但在一头扎进移动端样式之前，大屏需要的整体设计也得做到心里有数，以便在代码结构方面合理决策。
移动端样式一旦就绪，就需要在页面上分别设置一中一大两个 断点（breakpoint）。这可以借助 媒体查询（media queries） 叠加额外的样式来实现。额外引入的这些样式仅对尺寸更大的屏幕生效。
断点的定义
断点（breakpoint） 是一个特殊的临界点。它对应于浏览器的某个宽度或高度。页面样式会在屏幕尺寸跨过该点时发生改变，旨在为当前的屏幕尺寸提供最佳的布局效果。
本章后续还将对这些断点的设置细节做深入考察，现阶段只要知道页面会添加这些断点就行了；此外，还需要考虑在更大尺寸的屏幕下，页面布局一般都会涉及哪些样式调整。图 7.3 显示的是中等屏幕下的页面布局效果：
【图 7.3 中等屏幕视口下的页面效果】
这时的视口尺寸相比移动端稍微多了一些可供发挥的余地。标题栏和页面主图可以设置更大的内边距；各菜单项由于刚好可以在一行铺开，因此也无需隐藏了；汉堡图标因为不用控制菜单的开合，也随即去掉了；而主内容区则可以设计三个等宽列，并让大部分元素填充在距离视口边缘 1em 的范围内。
而尺寸更大的视口则与上面一样，但也可以适当增加页面的外边距，或者让页面主图再大些，如图 7.4 所示：
【图 7.4 大尺寸屏幕视口下的页面效果】
由于要先实现移动端设计，所以才更有必要了解清楚页面在大尺寸屏幕视口下的渲染效果，以便在一开始就确定出合理的 HTML 结构。我们先创建一个新页面和一个新样式表，然后将代码清单 7.1 中的 HTML 标记添加到新页面中。
这些代码看起来很像非响应式设计下的版本，但我针对移动端设计融入了好几处调整，稍后再详述。
代码清单 7.1 响应式设计下的页面 HTML 标记
<!doctype html>
<html lang=”en-US”>
<head><meta charset="UTF-8"><title>Wombat Coffee Roasters</title><link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header" class="page-header"><div class="title"><h1>Wombat Coffee Roasters</h1><div class="slogan">We love coffee</div></div>
</header><nav class="menu" id="main-menu"><button class="menu-toggle" id="toggle-menu"> <!-- 定义移动端菜单的“汉堡”状按钮 -->toggle menu</button><div class="menu-dropdown"> <!-- 在移动端设备上默认隐藏的主菜单 --><ul class="nav-menu"><li><a href="/about.html">About</a></li><li><a href="/shop.html">Shop</a></li><li><a href="/menu.html">Menu</a></li><li><a href="/brew.html">Brew</a></li></ul></div>
</nav>
<aside id="hero" class="hero">Welcome to Wombat Coffee Roasters! We arepassionate about our craft, striving to bring youthe best hand-crafted coffee in the city.
</aside>
<main class="main"><section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 --><h2 class="subtitle">Single-origin</h2><p>We have built partnerships with small farmsaround the world to hand-select beans at thepeak of season. We then carefully roast in<a href="/batch-size.html">small batches</a>to maximize their potential.</p></section><section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 --><h2 class="subtitle">Blends</h2><p>Our tasters have put together a selection ofcarefully balanced blends. Our famous<a href="/house-blend.html">house blend</a>is available year round.</p></section><section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 --><h2 class="subtitle">Brewing Equipment</h2><p>We offer our favorite kettles, Frenchpresses, and pour-over cones. Come to one ofour <a href="/classes.html">brewingclasses</a> to learn how to brew the perfectpour-over cup.</p></section>
</main>
</body>
</html>
上述代码中，切换移动端菜单的按钮位于 nav 元素内。nav-menu 元素放置的位置也恰好可以同时满足移动端和桌面端的设计需求。样式类 main 和 column 则用于桌面端的布局设计（构建新页面时可能一开始还摸不清这些元素的作用，不过不要紧，后面会演示）。
接下来给页面添加样式。先处理比较简单的元素样式，如页面字体、标题、字体颜色等，如图 7.5 所示。因为当前关注的是移动端样式，所以要将浏览器的宽度调小来模拟一个移动设备的尺寸。这样就能看到小屏幕上的页面是什么样的了。
【图 7.5 加上简单样式后的移动端页面效果】
该页面对应的样式如代码清单 7.2 所示。将它们更新到本地样式表，以建立边框盒模型（border box sizing），并让代码设置的字体和链接颜色生效。该代码用到了第 2 章（第 2.4.1 节）中介绍过的基于视口的响应式字号，并且定义了页面标题即主内容区的相关样式。
代码清单 7.2 给页面设置初始样式
*,
*::before,
*::after {box-sizing: border-box;
}:root {font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem); /* 基础字号会根据视口大小适当缩放（详见第2章内容） */
}body {margin: 0;font-family: Helvetica, Arial, sans-serif;
}a:link {color: #1476b8;font-weight: bold;text-decoration: none;
}
a:visited {color: #1430b8;
}
a:hover {text-decoration: underline;
}
a:active {color: #b81414;
}/* 页面标题栏样式 */
.page-header {padding: 0.4em 1em;background-color: #fff;
}/* 主标题样式 */
.title > h1 {color: #333;text-transform: uppercase;font-size: 1.5rem;margin-block: 0.2em;
}/* 副标题样式 */
.slogan {color: #888;font-size: 0.875em;margin: 0;
}.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; /* 深色的文字阴影效果确保浅色文字在复杂背景中清晰可辨 */
}/* 主内容区样式 */
main {padding: 1em;
}.subtitle {margin-block: 1.5em;font-size: 0.875rem;text-transform: uppercase;
}
上面的样式代码大都比较简单。它将页面标题和正文中的副标题都转换为全大写（all caps），还给页面各组件加上了内外边距，并调整了字号。
主图样式中的 text-shadow 属性可能比较陌生。该属性由若干个属性值构成。由这些值共同定义的文字阴影效果，最终将渲染到目标文字的后面。这些值的前两个，分别代表直角坐标系中的坐标位置，表征该阴影相对于文字位置的偏移量；而 0.1em 0.1em 则表明该阴影将相对于文字稍微往右下方偏移；第三个值（0.3em）为模糊半径，代表该阴影区域的模糊程度。最后的 #000 则指明了阴影的颜色。
译注
代码清单 7.2 第 8 行用到了工具函数clamp：font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem);。原文只提示参阅第二章，没有解释具体含义，这里补充说明。它表示字号设为0.5svw + 0.6em，且最小不低于0.9rem、最大不超过1.125rem。更多详情可参考本专栏第 14 篇 《【CSS in Depth 2 精译_014】2.4 视口的相对单位》 的第 2.4.2 小节相关内容。
关于《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 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
![[paddle]paddleseg快速开始](https://img-blog.csdnimg.cn/img_convert/3baa205345e943971ce0a31b0a6d1b8c.png)
