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

• 第一章 层叠、优先级与继承（已完结）
  • 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 媒体查询

《CSS in Depth》新版封面

译者按
继上一章学完 CSS 定位与堆叠上下文相关的知识后，本章来到全书第二篇（涵盖第 4 ~ 7 章内容）的最后一章——响应式设计。由于篇幅原因，开篇概述并没有和 7.1 节合并到一起。下一篇将重点展开响应式设计三大原则的第一大原则：移动端优先设计原则。本节先来看看响应式设计的相关背景知识，也算是给大家预热预热。前面知识点还有薄弱环节的，也可以利用我上面给出的各章节完整目录，对照梳理一下，及时查漏补缺。一切准备就绪后，就随我一起向第 7 章发起冲锋吧！

第七章 响应式设计 Responsive design

本章概要

• 基于多种设备及屏幕尺寸构建页面
• 用媒体查询，根据视口大小来变更设计
• 采用移动端优先的方式（mobile-first approach）来设计页面样式
• 使用响应式图片（responsive images）

现代社会中，网络（Web）无处不在：上班用台式机上网，回家躺床上用平板电脑上网，甚至连客厅里的智能电视都能联网，更别说随身携带的智能手机了。这个由 HTML、CSS 和 JavaScript 搭建的 Web 平台，俨然成为了一个前所未有的独特生态系统。

这也给 Web 开发人员带来一个颇有挑战的问题：网站究竟该如何设计，才能让用户在可能用到的各种设备*问页面时，做到既好用又好看呢？起初，不少开发人员的解决方案是同时搭建两个网站：桌面端（译注：即 PC 端）和移动端。服务器会将来自移动端设备的网络请求，从原来的 http://www.wombatcoffee.com 重定向到 http://m.wombatcoffee.com。该移动端站点往往会针对尺寸较小的屏幕提供更简约的用户体验，设计上也更精简。

随着越来越多的上网设备在市面上不断涌现，这种解决方案的好日子也基本到头了：平板设备该用移动端还是桌面端呢？主打一个大屏的手机又该如何是好？换成 iPad Mini 情况又如何？要是移动端用户偏要用桌面端的某些功能怎么办？最终，这种将 PC 端和移动端强行剥离的方案所带来的麻烦远比它能解决的问题多得多。除此之外，还需要同时维护多个站点。

一种更为理想的方案，是给所有用户提供同一套 HTML 和 CSS：通过应用几个关键技术，网页内容就能根据用户实际的浏览器视口尺寸（或者屏幕分辨率）渲染出不同的页面效果。这样就无需维护两个不同的站点了，创建一次，就能同时在智能手机、平板电脑、或者其他任意智能设备上流畅运行。这种页面设计方案由 Web 设计师 Ethan Marcotte 发扬光大，并称之为 响应式设计（responsive design）。

浏览网页时，不妨留意一下您遇到的响应式设计，看看那个网站是如何响应浏览器的不同宽度的。新闻类的网站特别有意思，它们往往要将很多内容塞进同一个页面。撰写本书时，波士顿环球报的官网 https://www.bostonglobe.com/ 就是个绝佳案例。该网站能够根据浏览器窗口宽度的不同分别提供单栏、双栏或三栏布局。通常只要缩放浏览器窗口的宽度，就可以直接查看页面最终响应的布局效果。这便是响应式设计的工作方式。

响应式设计的三大原则如下：

• 移动端优先（A mobile-first approach to design）设计：这意味着移动端的布局规划要先于桌面端。
• @media 规则（The @mdeia at-rule） ：这套样式规则可以为不同尺寸的视口定制特定的样式。该语法通常被称为 媒体查询（media queries），其声明的样式仅在满足特定的条件下才会生效。
• 应用流式布局（The use of fluid layouts）：该布局可以根据视口宽度调整页面容器的大小。

之前在介绍第二章相关内容时提到过上述部分设计原则。本章将针对这三个核心原则进行更深入地探讨。先从一个响应式页面的构建开始，然后逐步展开介绍这三个原则。因为图片在响应式网站中的处理比较特殊，最后还会专门介绍一些响应式图片相关的知识。

DIY 补充：考察波士顿环球报的官网响应式设计

作为本节概述的补充，同时也为了方便大家对文中提到的单栏、双栏、三栏布局有一个直观的认识，特地到该网站去看了一下，确实做得非常精美：

【补图 1 《波士顿环球报》官网单栏布局实测效果截图】

【补图 2 《波士顿环球报》官网双栏布局实测效果截图】

【补图 3 《波士顿环球报》官网三栏布局实测效果截图】

---

---

关于《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 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！