响应式图片

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>的用法很熟悉：

 

 

1 2 3 4 5 6 7 8 9

<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

 

 

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

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

3、img的srcset、sizes属性

当然，<img>元素自身也提供了响应式的属性：srcset和sizes。

3.1 旧版本的srcset属性

在以前，我们是这样用的：

 

 

1	<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，我们只需要提供图片资源以及断点，浏览器会去自动匹配最佳显示图片。

使用方法如下：

 

 

1	<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属性的作用类似媒体查询，用来设置图片尺寸的临界点。

 

 

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

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

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

因为它只是支持部分媒体查询，比如：

 

 

1 2 3 4 5 6 7

(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可以这样设置：

 

 

1	sizes="80vw"

（2）假如图片两侧的边距各为10px，我们可以这样设置：

 

 

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

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

 

 

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

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

 

 

 

原文地址：http://web.jobbole.com/88846/

作者：伯乐在线专栏作者 - TGCode