响应式图片

6,369 阅读5分钟

“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。

这篇文章主要内容:

  • 为什么要使用响应式图片
  • 元素
  • img的srcsetsizes属性

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

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

我们有两种方法来设置响应式图片:
使用元素(HTML5新增)
使用img的srcsetsizes

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


  
  
  

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

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

兼容性:兼容性

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