【CSS in Depth 2 精译_051】7.4 CSS 响应式设计中的图片处理 + 7.5 本章小结

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

• 【第七章 响应式设计】（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片 ✔️
  • 7.5 本章小结 ✔️

文章目录

• • 7.4 响应式图片 Responsive images
  • • 7.4.1 不同的视口尺寸使用不同的图片 Using multiple images for different viewport sizes
    • 7.4.2 使用 srcset 提供对应的图片 Using srcset to serve the correct image
  • 7.5 本章小结 Summary

《CSS in Depth》新版封面

7.4 响应式图片 Responsive images

在响应式设计中，图片需要特别关注：不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片往往是页面上用得最多的一个资源。首先要保证图片充分压缩。在图片编辑器中选择 “Save for Web”（保存以适应 Web）选项能够极大地缩小图片体积，或者使用别的图片压缩工具来压缩图片，比如 tinypng 网站：https://tinypng.com/。

此外，还要避免不必要的高分辨率图片。不过，是否 “必要” 还得看视口的尺寸大小。也没有必要为小尺寸屏提供大图，因为它们最终都会被压缩处理。

7.4.1 不同的视口尺寸使用不同的图片 Using multiple images for different viewport sizes

响应式图片的最佳实践是为一个图片创建不同分辨率的副本。如果根据媒体查询得知屏幕的尺寸偏小，那么发送超大图片就完全没必要；最终浏览器还不得不降低图片分辨率，以适配小尺寸屏幕。

利用响应式技术，我们可以为不同屏幕尺寸提供大小最合适的图片。比如页面上的主图，其 CSS 样式如代码清单 7.14 所示，将它们添加到本地样式表。

代码清单 7.14 添加响应式背景图的 CSS 样式

.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans-small.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;
    background-image: url(coffee-beans-medium.jpg); /* 在中等屏幕上提供稍大的图片 */
  }
}

@media (min-width: 800px) {
  .hero {
    padding: 7em 6em;
    background-image: url(coffee-beans.jpg); /* 在大屏幕上提供完整分辨率的图片 */
  }
}

在不同屏幕尺寸的浏览器上加载上述页面，根本看不出有什么区别。这就是关键所在。在小断点下，屏幕尺寸不够宽，无论如何都显示不下完整分辨率的图片，但实际加载的图片所省下的流量少说也有几十到上百 Kb。在图片较多的页面上，这些累计节省出的流量就能显著提高页面的加载速度。

7.4.2 使用 srcset 提供对应的图片 Using srcset to serve the correct image

媒体查询固然可以解决通过 CSS 加载图片的问题，但是 HTML 里的 <img> 标签怎么办？对于这种行内图片（inline images），有另一个重要的解决方案：srcset 属性（即 “source set” 的缩写）。

该属性可以给一个 <img> 标签指定不同的图片 URL，并限定相应的分辨率。浏览器会根据自身需要决定加载哪一个图片（如代码清单 7.15 所示）。

代码清单 7.15 响应式 srcset 图片样式

<img alt="A white coffee mug on a bed of coffee beans"
     src="coffee-beans-small.jpg"  <!-- 给不支持srcset的浏览器（如IE、OperaMini等）提供常规src属性 -->
     srcset="coffee-beans-small.jpg 560w,   <!-- 每张图片的URL和它对应的宽度 -->
             coffee-beans-medium.jpg 800w,  <!-- 每张图片的URL和它对应的宽度 -->
             coffee-beans.jpg 1280w"        <!-- 每张图片的URL和它对应的宽度 -->
/>

所有现代浏览器目前均支持 srcset 属性；不支持的旧版浏览器则会根据 src 属性加载相应的 URL。这样一来，就实现了针对多种屏幕尺寸来优化图片。更棒的是，浏览器会针对高分辨率屏自动作出相应调整。如果设备屏幕的像素密度为 2x（即 2 倍），那么浏览器就会相应地加载更高分辨率的图片。

有关响应式图片的更多内容，详见 jakearchibald 网站刊登的文章 The Anatomy of Responsive Images。这篇文章还介绍了其他有用的配置项，例如根据加载的图片调整显示的大小。

提示

图片作为流式布局的一部分，请务必确保它们不会超过容器的宽度。为避免出现这样的情况，一劳永逸的办法是在样式表中加入规则：img { max-inline-size: 100%; }。

页面响应式设计的结构实现方式千变万化。最终这些方式都会归结为应用这三大原则：移动端优先（mobile first）、媒体查询（media queries）、流式布局（fluid layout）。掌握这些设计原则有助于在构建页面时牢记响应式设计的各种需求。

这种方法在相当长的一段时间内被业内证明都是有效的。不过，还有一个重要工具需要补充：容器查询（container queries）。这是 CSS 的最新特性，同时也是众多开发人员多年来翘首以盼的一项强大功能。本书将在接下来的章节中介绍一些必要的基础知识，并在第十章再次探讨响应式设计的相关话题，重点介绍这一功能。

---

7.5 本章小结 Summary

• 按照移动端优先的思路切入设计，会让响应式设计更容易实现。将移动端页面放大到大尺寸屏，比反过来缩小页面以适配移动端小屏容易得多。
• 媒体查询可以根据视口尺寸及其他用户环境让 CSS 样式选择性生效。利用这一特性，可以逐步增强页面在逐级扩大的视口尺寸中的渲染效果。
• 流式布局可以适配任意尺寸的浏览器屏幕。
• 响应式图片能有效适应移动端设备的带宽限制。
• 视口 meta 标签会告诉浏览器该页面是基于响应式设计的页面。这将确保您设计的样式在小尺寸的设备上生效时符合预期。

译注
至此，全新修订的第 7 章：CSS 响应式设计的所有内容就介绍完了，希望大家都能和我一样收获满满。从下一章开始，我们将暂别 CSS 布局知识的学习，进入本书第三个模块“现代 CSS 代码的编写与组织”，其中第八章还是新版中一个全新的章节，介绍 CSS 最新的层叠层（cascade layers）相关的知识，敬请期待！！！

---

---

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