image的srcset属性

介绍

响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下，image自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

新标准

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片的话，太麻烦了。所以就有了新的srcset标准。代码如下：

<img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。

对于srcset里面出现了一个w单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用，当然，浏览器会自动选择一个最大的可用图片。

sizes语法如下：

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

上面例子中的sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

例如上述代码中，size = "(max-width: 360px) 340px, 128px"表示当视区宽度不大于360像素时候，图片的宽度限制为340像素，其他情况下，使用128像素（对应下面demo页面第1张图）。

如果sizes="128px", 则尺寸就一直是128像素，图片只会根据设备像素比发生变化。

注意，这里所有的值都是指宽度值，且单位任意，em, px, cm, vw, ...都是可以的，甚至可以CSS3的calc计算（对应下面demo页面第2张图），例如：

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

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

OK，上面2个属性具体如何起作用的呢？首先，你需要狠狠地点击这里：srcset与sizes新释义w描述符示意demo

总结

img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到，已经全部都兼容了，可以放心使用

 

原文

http://www.zhangxinxu.com/wordpress/?p=4371

http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/

 http://segmentfault.com/a/1190000004254111