【CSS in Depth 2 精译_045】7.1 CSS 响应式设计中的移动端优先设计原则（上）

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

第一章层叠、优先级与继承（已完结）
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 in Depth》新版封面

译者按
铺垫了好几天，今天终于要开始学习 CSS 响应式设计的第一个大原则了——移动端优先（mobile first）。第七章有个特点——每一节篇幅都比较长，因为涉及整个页面的谋篇布局和响应式处理，不再仅仅聚焦于一个个具体的知识点上，学习时一定要在头脑里构建一个宏观的视角。篇幅原因，本节拟分上下两篇进行介绍，本篇为上篇，对应 7.1 节的概述部分。只要跟着作者的思路进行本地实战演练，其实也没有想象中的那么抽象。一起加油吧！

7.1 移动端优先设计原则 Mobile first

响应式设计的第一原则就是 移动端优先（mobile first），顾名思义，就是移动端布局的构建要先于桌面端布局。这是确保两个版本都能生效的最佳方案。

开发移动端页面就像戴着脚镣跳舞：除了屏幕大小受限、网速偏慢外，页面交互所使用的控件（controls）也和 PC 端不太一样：虽然可以打字，但总感觉不太顺手，更没法将鼠标悬停在元素上触发一些特定效果。倘若一开始就设计一个功能全面的网站，然后企图根据移动端的诸多限制削减某些功能，这么做往往都会以失败告终。

而选用移动端优先的方式，则会让您在网站设计之初就开始考虑这些制约因素。一旦解决了移动端的用户体验问题（至少做了相关规划），后续就可以通过“渐进式增强（progressive enhancement）”技术去改善大尺寸屏幕用户的交互体验。

本章最终要实现的页面效果如图 7.1 所示。没错，这就是一版移动端的页面设计。

图 7.1 待实现的移动端页面设计效果图

【图 7.1 待实现的移动端页面设计效果图】

该页面有三个主要部件：标题栏（header）、带了些文字内容的页面主图（hero image）、以及主内容区（main content）。要是轻触或单击页面右上角那个图标，还能弹出一个隐藏菜单（如图 7.2 所示）。这个由三条横线组成的图标因为形似汉堡包中的面包和肉饼，通常也被称作 汉堡（hamburger） 图标。

图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果

【图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果】

移动端布局一般是很朴素的设计。除了这个带交互效果的菜单，移动端更侧重于内容的展示。相对于大屏有大块的空间来布局标题栏、页面主图和菜单区，移动端用户往往浏览网页的目的性更强。他们很可能与友人在户外玩耍，只想快速查到商店营业时间或者像价格、地址这样的具体信息。

因此移动端的设计就是围绕内容展开的。试想有这么一个 PC 端页面，一边设计为文章内容，另一边则是包含链接的侧边栏，里面还有些不太重要的内容。要是换到移动端来，肯定是希望先看到文章内容。换句话说，我们希望最重要的内容先出现在 HTML 里。这一点恰好与页面可访问性关注的焦点不谋而合：一款读屏工具会优先读到“重要的内容（good stuff）”；或者让用户通过键盘操作，率先获取到这篇文章中的链接，其次才是侧边栏里的。

话虽如此，上述原则也并非放之四海而皆准。比如上面谈到的示例页，尽管页面主图没有下方的内容重要，但它不失为整个页面最抢眼的部分，因此考虑将其留在页面顶部的位置也是合理的。另外，它还带有少量文字内容，浏览起来也不费工夫。

重点

做响应式设计时，一定要确保 HTML 里涵盖了各种屏幕尺寸所需的全部内容。每个屏幕尺寸固然可以有各自的 CSS 样式，但它们必须共享同一份 HTML。

再来看看稍大一些的视口（viewport）该如何设计。屏幕较小的移动端布局固然要先行，但在一头扎进移动端样式之前，大屏需要的整体设计也得做到心里有数，以便在代码结构方面合理决策。

移动端样式一旦就绪，就需要在页面上分别设置一中一大两个 断点（breakpoint）。这可以借助 媒体查询（media queries） 叠加额外的样式来实现。额外引入的这些样式仅对尺寸更大的屏幕生效。

断点的定义

断点（breakpoint） 是一个特殊的临界点。它对应于浏览器的某个宽度或高度。页面样式会在屏幕尺寸跨过该点时发生改变，旨在为当前的屏幕尺寸提供最佳的布局效果。

本章后续还将对这些断点的设置细节做深入考察，现阶段只要知道页面会添加这些断点就行了；此外，还需要考虑在更大尺寸的屏幕下，页面布局一般都会涉及哪些样式调整。图 7.3 显示的是中等屏幕下的页面布局效果：

图 7.3 中等屏幕视口下的页面效果

【图 7.3 中等屏幕视口下的页面效果】

这时的视口尺寸相比移动端稍微多了一些可供发挥的余地。标题栏和页面主图可以设置更大的内边距；各菜单项由于刚好可以在一行铺开，因此也无需隐藏了；汉堡图标因为不用控制菜单的开合，也随即去掉了；而主内容区则可以设计三个等宽列，并让大部分元素填充在距离视口边缘 1em 的范围内。

而尺寸更大的视口则与上面一样，但也可以适当增加页面的外边距，或者让页面主图再大些，如图 7.4 所示：

图 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 are
  passionate about our craft, striving to bring you
  the 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 farms
      around the world to hand-select beans at the
      peak 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 of
      carefully 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, French
      presses, and pour-over cones. Come to one of
      our <a href="/classes.html">brewing
      classes</a> to learn how to brew the perfect
      pour-over cup.</p>
  </section>
</main>
</body>
</html>

上述代码中，切换移动端菜单的按钮位于 nav 元素内。nav-menu 元素放置的位置也恰好可以同时满足移动端和桌面端的设计需求。样式类 main 和 column 则用于桌面端的布局设计（构建新页面时可能一开始还摸不清这些元素的作用，不过不要紧，后面会演示）。

接下来给页面添加样式。先处理比较简单的元素样式，如页面字体、标题、字体颜色等，如图 7.5 所示。因为当前关注的是移动端样式，所以要将浏览器的宽度调小来模拟一个移动设备的尺寸。这样就能看到小屏幕上的页面是什么样的了。

图 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 则指明了阴影的颜色。

关于《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