响应式图片

“响应式（Responsive）”这个词我想你们没有听过一千遍，也有一百遍了。响应式是指实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。网上介绍响应式的文章也有不少了，好比：《自适应页面设计》。在这篇文章中，咱们不讲页面布局的响应式，咱们主要来看看“响应式图片”。

这篇文章主要内容：

• 为何要使用响应式图片
• 元素
• img的srcset、sizes属性

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

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

咱们有两种方法来设置响应式图片：
使用 元素（HTML5新增）
使用img的srcset、sizes

二、picture元素
在HTML 5中，增长了一个新元素 。用过 、 的，会以为 的用法很熟悉：

 
  
  
  
复制代码

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

看到 这个元素是否是很兴奋，但是不得不提醒你一句，目前来讲，这个元素仍是有部分兼容性问题的。

兼容性：兼容性

固然，若是你必定要使用 这个元素，又要在其余浏览器里支持，那你就须要添加一个额外的插件：Picturefill2.0

复制代码