首页 专题 H5案例 前端导航 UI框架

响应式图片

作者:TG 日期: 2016-11-11 阅读: 1242
“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。
这篇文章主要内容:
  • 为什么要使用响应式图片
  • <picture>元素
  • img的srcset、sizes属性

1、为什么要使用响应式图片
假如有一张图片的显示宽度为200px,那么,它在 1x(即设备像素比为 1 的显示器) 的显示器上,是占了 200 个物理像素(即实际所占的像素);它在 2x 的显示器上,实际上是占了 400 个物理像素;在 3x 的显示器上,实际上是占了 600 个物理像素;在 4x 的显示器上就是占了 800 个物理像素。

如果这个图片只提供 200 像素的尺寸,那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本,那么在 1x~3x 的设备上会显得多余,因为加载时间会相较长,所以我们要使用响应式图片。

我们有两种方法来设置响应式图片:
  • 使用<picture>元素(HTML5新增)
  • 使用img的srcset、sizes

2、picture元素
在HTML 5中,增加了一个新元素<picture>。用过<video>、<audio>的,会觉得<picture>的用法很熟悉:

<picture>

  <source srcset="smaller.jpg" media="(max-width: 750px)">

  <source srcset="default.jpg">

  <img srcset="default.jpg" />

</picture>

不知道你注意到没有,在 media 属性使用的语法与CSS媒体(media)特性中使用的语法一样。你可以使用相同的特性,也就是说你可以查询 max-width , min-width , max-height , min-height , orientation 等属性。


看到<picture>这个元素是不是很兴奋,可是不得不提醒你一句,目前来说,这个元素还是有兼容性问题的。


兼容性:兼容性


当然,如果你一定要使用<picture>这个元素,又要在其他浏览器里支持,那你就需要添加一个额外的插件:Picturefill2.0

<script src="picturefill.js"></script>


虽然<picture>很方便,但如果你考虑到兼容性,还是要谨慎使用,不过,我们也有兼容性较好的另外一种处理响应式图片的方法,看下面。


3、img的srcset、sizes属性

当然,<img>元素自身也提供了响应式的属性:srcsetsizes


3.1 旧版本的srcset属性


在以前,我们是这样用的:

<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" />

这段代码什么意思呢?

浏览器根据屏幕不同的像素密度(x)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。


看图:




别老是看着“别人的妹子”,请注意红色箭头,DPR就是设备像素比,不同的像素比,会显示不同的图片。


目前屏幕密度有:1x、2x、3x、4x。


3.2 新标准的srcset、sizes属性,w描述符

旧版本的srcset使用多少有些局限性,不过幸好的是到2014年,我们已经有了全新的srcset,而且还多一个size是属性。


使用新的srcset,我们只需要提供图片资源以及断点,浏览器会去自动匹配最佳显示图片。


使用方法如下:

<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。。





注意:如果你用pc浏览器测试这段代码,一定要先进入移动模式,因为一打开页面时可视区大于500px(除非你的电脑是迷你版),会先显示大图片,随后即使你缩小屏幕,小图片虽然会加载,你可以在控制台的“Network”里看到,但是显示的依旧会是大图片,因为前面大图片已经缓存了,而浏览器会自动匹配最佳显示的图片。


srcset用来提供图片资源,sizes属性的作用类似媒体查询,用来设置图片尺寸的临界点。

sizes="[media query] [length], [media query] [length]..."

要保证使用 sizes 里计算出来的宽度始终是图片所占屏幕宽度(length)。


为什么说sizes属性的作用类似媒体查询呢?

因为它只是支持部分媒体查询,比如:

(min-width: 400px)

(not (orientation: landscape) )

( (orientation: landscape) and (min-width:400px) )

( (orientation: portrait) or (max-width: 500px) )

但它不支持我们明确的定义媒体类型:比如screen或者print等等。


除了使用px外,我们还可以使用em、px、cm、vw...,甚至CSS3的calc,不能使用百分比。

sizes="(max-width: 320px) calc(100vw - 20px), 128px"

表示当视区宽度不大于320像素时候,图片宽度为整个视区宽度减去20像素的大小。


兼容性查看:兼容性


3.3 常见的使用场景

(1)如果图片的宽度是整个视口的百分比,那么sizes可以这样设置:

sizes="80vw"


(2)假如图片两侧的边距各为10px,我们可以这样设置:

sizes="calc( 100vw - 20px)"


(3)如果有一个两侧边距为10px的图片,允许它的最大宽度为500px,我们可以这样设置:

sizes="( min-width:520px) 500px, calc(100vw - 20px)"

上面的代码表示当可视区大于520px时,图片宽度为500px,否则宽度为calc(100vw - 20px)计算的值。


关注”全栈技术杂货铺“

全栈技术杂货铺