0
点赞
收藏
分享

微信扫一扫

结合个人学习经验提出反馈111111

文章目录

《CSS in Depth》新版封面

《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。这篇文章还介绍了其他有用的配置项,例如根据加载的图片调整显示的大小。

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

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


7.5 本章小结 Summary

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


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

目前已完结的章节(可进入本专栏查看详情,连载期间完全免费):

举报

相关推荐

HTML个人学习

Java个人学习7

SiamFC个人学习笔记

rust个人学习(2)

TS学习(个人学习笔记)

Spark个人学习笔记

0 条评论