当前位置:首页 > 响应式网站建设

响应式布局提高篇 - 图片正确的打开方式

2019-06-04

图片在 Web 中占有非常重要的地位,一方面,一图胜千言,图片作为内容的载体,能够有效传递出信息;另一方面,图片占网页流量消耗的 60%,对网页的大小和加载速度有很大的影响。

随着终端设备日益丰富,人们更多地通过各种尺寸的小屏浏览网页,经常发生图片过大导致网页布局混乱的情况,非常影响用户体验。因此图片需要根据设备类型和尺寸进行自适应调整,才能保证网站在各个终端获得相似的使用体验。

要做到图片自适应宽度,一个简单的方法是,给图片设置 max-width: 100%,这确实非常有作用,图片不会溢出或者页面出现横向滚动条,那还有没有其他需要我们注意的呢?


在使用高清屏幕设备(比如 iPhone X)浏览网站时我们会发现,一些图片看起来比较模糊,而在普通屏幕设备中却没有那么模糊,这是为什么呢?

这里需要用到在上一章中提到的几个概念,为方便起见,我们一起来回顾一下:

物理像素(设备像素)

一个物理像素代表的就是最小的物理显示单元,在同一个设备中,物理像素点的大小是固定的,数量也是固定的。比如 iPhone X 的物理像素是 1125x2436。

逻辑像素(CSS 像素、设备独立像素)

逻辑像素是一个抽象单位,与设备无关,在不同的设备中呈现的大小是一致的,比如逻辑像素为 10x10 的方块,在手机和显示器看上去大小是一样的,这样可以保持阅读体验的一致,同时也方便开发。iPhone X 的逻辑像素是 375x812。

设备像素比(Device Pixel Ratio,DPR)

根据以上两个概念,可以自然地想到,在一个设备中逻辑像素与物理像素的比值是确定的,一个逻辑像素覆盖了多个物理像素,这可以用设备像素比来表示。比如 iPhone X,375x812 的逻辑像素包含了 1125x2436 的物理像素,设备像素比的值就是 3。可以通过下图进一步理解上面三个概念之间的关系。

有了上面的概念,就能简单地解释图片为什么会变模糊。举个例子,分别在普通屏(DRP = 1)和 Retina 屏(DPR = 2)用 CSS 像素为 300x400 的 <img> 显示分辨率是 300x400 的图片。

对于普通屏,图像像素和物理像素 1:1,图像不失真。而对于 Retina 屏,图像像素和物理像素 1:4,由于每个图像像素不可分割,物理像素就近取色,从而让图片变得模糊。这种情况需要使用分辨率更高的图片,比如分辨率为 600x800,图像像素和物理像素 1:1,这样就能充分利用 Retina 屏幕的物理像素点,显示出更清晰的图片。

如果在普通屏下也使用分辨率为 600x800 的图片,图像像素和物理像素 4:1,物理像素点只能通过采样,用不足的数量来显示图片。这不仅没有发挥出高清图片的优势,还由于图片的增大而造成了带宽的浪费。

由此可以发现,为了更好地在各种终端设备显示图片,需要考虑设备像素比、图像分辨率、渲染尺寸等因素,如果只是简单地加载图片然后修改样式适应宽度,并不能保证显示效果和加载速度,甚至会大大降低用户的使用体验。因此,需要采用合适的方法对图片进行响应式设计。


媒体查询(media query)

根据前面的分析,图片的响应式设计与渲染尺寸(图片显示大小,<img> 的 CSS 像素)有关,而渲染尺寸通常由设备的视口大小决定,因此就需要一种方法对设备的视口大小进行判断。

CSS 中的媒体查询提供了相关的判断方法,可以根据不同的设备特征应用不同样式。媒体查询支持很多设备特征,由于本章主要介绍响应式图片,实际主要用到其中的视口的宽度和设备方向,如下表所示。

更多关于媒体查询的介绍可以参考 MDN 上的文档《CSS 媒体查询》(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)

设备特征取值说明
min-width数值,如 600px视口宽度大于 min-width 时判断为真
max-width数值,如 800px视口宽度小于 max-width 时判断为真
orientationportrait | landscape当前设备方向,portrait 垂直,landscape 水平

对于 min-width 和 max-width 的取值,我们称为断点(Breakpoints)。如何选择断点,主要取决于产品设计本身,没有万能媒体查询的代码。但经过实践,我们也总结了一套比较具有代表性的设备断点。

如果要对细分屏幕大小进行适配,可以查看这篇文章,里面列出了详细的常见设备的媒体查询条件,《media queries for common device breakpoints》(https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/)


实现响应式图片

前面说了这么多,终于到大家最为关心的部分了。不过先别急,在动手之前,还有一个问题是需要我们去思考的,那就是在根据设备特征选用不同的图片时,是否需要更改比例、裁剪甚至替换整个图片,或者只是仅仅更改图片的分辨率。前者被称为艺术方向(art direction),后者被称为分辨率切换(resolution switching),下面先介绍分辨率切换。

分辨率切换

分辨率切换主要用于优化低分辨率设备的带宽消耗,通常使用在如下场景:开发者提供图片的多个分辨率版本,大屏和高清屏用户获取高分辨率版本,小屏用户获取低分辨率版本。以下是实现分辨率切换的代码例子:

下面具体介绍这两个属性的用法。

srcset

一般形式:

srcset="[url] [num][descriptor], [url] [num][descriptor], …"

指定了一组可选的源,源之间用逗号分隔,每个源由两部分组成:

  1. 图片的 url

  2. 正整数+宽度描述符 w 或者 正浮点数+像素密度描述符 x,如果该项为空,则默认为 1x

浏览器会通过描述符来选择对应的源,如果使用密度描述符 x,则判断哪一项与设备像素比更接近,例如:

<img srcset="1200x800.jpg 2.5x,             800x600.jpg 2x, 600x400.jpg 1.5x" src="500x400.jpg">

在 DPR = 2 的 iPhone 6 中会加载 800x600 的图片。

对于宽度描述符 w,由于需要与 sizes 属性一起使用,因此会在下面和 sizes 属性一起介绍。

sizes

一般形式:

sizes="[media-query] [size], [media-query] [size], …, [size]"

指定了一组可选的 size,size 之间用逗号分隔,每个 size 由两部分组成:

  1. 媒体查询,但是不能存在于最后一项,因为最后一项用作默认值

  2. 图片的 size(CSS 像素),可用 px、em、vw 等单位

当 srcset 属性使用 w 时,sizes 属性才会起作用,浏览器会根据下面的顺序加载图片。

  1. 浏览器逐项判断 sizes 属性中的媒体查询条件,当为真时取该项的 size 作为图片的大小信息,如果 <img> 的 CSS 样式没有指定大小,则会使用 size 作为 <img> 的大小

  2. 根据 size 和设备像素比,两者相乘得出图片的分辨率

  3. 从 srcset 的宽度描述符中选出不小于所得分辨率中最接近的一项,没有则选最大的一项,取该项作为图片的源

例如:

<img srcset="1200x800.jpg 1200w, 700x500.jpg 700w, 500x400.jpg 500w, 300x200.jpg 300w" sizes="(max-width: 480px) 350px,  (max-width: 800px) 650px,  1000px" src="500x400.jpg">

在 DPR = 1 和视口宽度 = 440px 的情况下,根据 sizes 属性获得 size 为 350px,计算 350x1 = 350,在 srcset 中不小于 350 又最接近的是 500w,所以会选择加载 500w 对应的 500x400 图片。

以上就是 srcset 和 sizes 的用法,需要注意的是,以下情况是不正确的:

  • 在同一个 srcset 中混合使用了 x 和 w

  • 在同一个 srcset 有重复的描述符,比如有两项都是 2x

另外值得一提的是,当我们使用 srcset 属性时,实际上是向浏览器提供相关信息,让浏览器作出更好的选择,浏览器可能还会根据用户的偏好、网络条件等因素调整选择。而这个特点,就是接着要介绍的 <picture> 与 <img>+srcset 之间的重要区别之一。

如果对 srcset 和 sizes 还想了解更多,可以访问 MDN 的文档《响应式图片》(https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

艺术方向

艺术方向听上去可能比较让人费解,但如果用例子来解释就会非常简单。考虑如下情况:

我们提到将图片的 max-width 设置为 100%,图片就会在手机屏幕上压缩到视口的宽度,如果这张图片实际上很大,图片中的内容就会看不清,特别是如果图片主要内容集中在中间,如人像,浏览效果会比较差。遇到这样的情况,最好的方式是在不同的屏幕尺寸下采用不同的图片,让主要内容保持在视口中间,如下图。





免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号