&nbs p;
一、最近我在干嘛
最近产出较少，都干嘛去了呢！国庆前夕（节假日就是各个项目的截止日）火火火火忙了个把星期；国庆黄金周钓了一周的鱼，肌肉都练出来了；节后折腾自己的一个开源项目，蛮大蛮有前途的（自我感觉而已，呵呵~），现在进行了80%了，所以文章就没时间生产了。其实呢，是搬新家后，上下班时间长了，时间被打得太碎，加上回家还要时不时播种，腾不出整段时间弄文章。
以前孤家寡人、公司半里路，时间太好掌控了，所以有很多的时间折腾。现在嘛，只能说，人在江湖飘，哪有不挨刀。突然想起了facebook给女员工冰冻卵子的新闻，可以理解：安心卖命，少点有的没的的，用心工作。
今天周末，鱼钓过了、车子保养好了、超市转过了、菜市场跑过了、晚饭吃好了、锅碗刷好了，哦~今天是夫人刷的，我就说怎么时间多了点呢，新番也大致过了，终于，可以安安静静坐下敲键盘了。恩，争取周末把这篇搞出来。
二、响应式图片srcset属性
说起图片的 srcset 属性，估计有不少与时俱进的小伙伴会在心中不由自主念想道：“这个我知道的，可以根据屏幕密度现实对应尺寸图片，例如……”
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">
我们也可以简写成：
<img src="mm-width-128px.jpg" srcset="mm-width-256px.jpg 2x">
关于 srcset 属性效果，您可以狠狠地点击这里：设置srcset后不同屏幕密度加载不同图片demo。
通常我们windows系统的PC显示器默认设备像素比都是 1 ，因此，这些显示器呈现的图片默认都是 128 像素宽度的。
因此，我们看到的是宽度128像素的这张图，如下截图：
通过进入移动端预览模式，例如，选择iPhone 6，此时设备像素比为 2 ，刷新下页面，会看到加载的是256像素宽度的图片：
不同的2x显示策略
还有些时候，使用同尺寸的高清图片作为 2x 对应图片，虽然两者图片大小差不多，但个人觉得还是2倍尺寸优化大图更好一点，为什么呢？
srcset 当初设计的用意是为了高密度屏幕上图片更好的显示，如果世界上就只有“不同设备密度”这一个戏剧冲突的话， 2x 图片是高清图还是2倍尺寸图其实都无伤大雅。然而，事实上，生活无处不戏剧，现代web布局中，有种布局不可忽略，那就是「响应式布局」，剧本往往会这样，PC浏览器上显示大图，Mobile浏览器上显示小图。发现没，同样是“大小图的要求”，和设备像素比有类似的戏剧冲突。
于是，如果我们 2x 图片使用的是高清图，结合响应式布局，我们可能需要4张图片资源，即：小图、小图高清和大图、大图高清。但是， 2x 图片走的是2倍尺寸图片，我们只需要3张图片资源，即：小图、中图以及中图、大图。
在老的 srcset 规范成型过程中，其实已经考虑到与响应式布局的复杂场景，出现了 w 描述符，例如，走高清路线的：
<img src="small.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">
走2倍尺寸路线的：
<img src="small.jpg" srcset="small.jpg 640w 1x, medium.jpg 640w 2x, medium.jpg 1x, large.jpg 2x">
注意啊注意： 千万不要去关心上面的 w 描述符的含义，因为上面的是旧语法，在新的 srcset 属性中 w 描述符含义与之完全不同，为了避免理解冲突，心中跟我默念3遍：忘掉它、忘掉它、忘掉它，无视它、无视它、无视它。大家可以把精力放在下面，新的srcset规范以及新的sizes属性语法含义等。
//zxx: 下文内容2018-01-02全部重写了
三、全新的智能srcset、sizes属性, w描述符
新的 srcset 是功能更加强大，适用场景也更多，只需要提供图片资源、以及断点，其他都交给浏览器智能解决，浏览器会自动根据场景匹配最佳显示图片。你的表情现在是不是这样子啊：
首先看一段 HTML 代码，关于两个图片：
< img src="128px. jpg " srcset="128px.jpg 128w, 256px.jpg 256w, 512 px.jpg 512w" sizes="(max-width: 360 px) 340px, 128px"> <img src="128px.jpg" srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w" sizes="(max-width: 360px) calc(100vw - 20px), 128px">
其中，128px.jpg，256px.jpg，512px.jpg分别指下面3张图片（左上角有 尺寸 标示）：
两个图片HT ML 的 srcset 的属性值是一样的，如下：
srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
表示，当 <img> 元素的 宽 度规格为128的时候，加载128px.jpg，宽度规格为256的时候，加载256px.jpg， 宽度规格为512的时候，加载512px.jpg。
这里的宽度规格就是 w 描述符的另外一种理解，其与 sizes 属性设定和屏幕密度密切相关。
举个例子，假设屏幕密度是2的 iphone6 手机， sizes 属性计算值是 128px ，则此时 <img> 实际的宽度规格 应该 是 128*2 也就是 256w ，因此会加载256px.jpg这张图。
您可以狠狠地点击这里：srcset与sizes新释义w描述符示意demo
例如，我在我的PC上普通屏幕的windows机子打开此页面。
结果上下两个 <img> 元素加载的都是128.jpg这张图：
原因 如下：
上面的 <img> 元素设置的 sizes 属性值 (max-width: 360px) 340px, 128px 表示当视区宽度不大于360像素时候，图片的宽度限制为340像素；其他情况下，使用128像素。
下面的 <img> 元素设置的 sizes 属性值 (max-width: 360px) calc(100vw - 20px), 128px 表示当视区宽度不大于360像素时候，图片的宽度限制为屏幕宽度减20像素；其他情况下，使用128像素。
由于桌面显示宽度远大于 360px ，所以，此时图片计算的尺寸宽度是 128px ，加上屏幕密度为 1 ，因此，正好是 128w 这个规格，于是加载128px.jpg。
现在，我们换到手机模式下预览，选个iPhone6，此时屏幕宽度 375px ，依然大于 360px ，但是屏幕密度为 2 ，因此， 图片尺寸 128px 乘以密度 2 正好是 256w 这个规格，于是加载256px.jpg。
如下截图：
同理，切换成屏幕密度是3的iPhone6 Plus，则会加载512.jpg，因此此时宽规则超过 256w ，使用上面一个梯度图片资 源 512w 。
sizes的 媒体查询
下面来看看 sizes 属性中媒体查询的应用。
我们需要把我们的屏幕宽度 调整 到360宽度以下，同时为了避免测试干扰，需要设置设备像素比为 1 。此时，我们可以自定义一个媒体设备，例如，模拟微信浏览器的一个360*680的设备：
@H_722_ 126 @
此时，图片宽度就不是 128px ，上面的 <img> 元素 340px ，下面的 <img> 元素 calc(100vw - 20px) 也是 340px ，此时宽度规格是 340w ，因此，都是加载的 512w 下的512px.jpg，截图如下：
OK, 下面我们想办法把显示宽度弄成 250px ，会发现上下两张图的差异来了，如下Firefox浏览器下截图：
因为上面 <img> 元素计算尺寸 340px ，下面的 <img> 元素计算尺寸是 230px ， 230px 在 256w 规格之下，因此，下面的 <img> 元素加载的是256px.jpg。
然而，我在我的Ch rom e 62浏览器中测试发现，丫的居然都是加载的512px.jpg，我估计多 半 是bug。
因为，当初我写这篇 文章 时候，C hr ome38版本，表现还是符合预期的：
尴尬 ！
四、兼容性以及结束语
目前 srcset 、 sizes 属性兼容性相比几年前要好了很多，如下截图：
移动端可以放心使用，桌面端也可以放心使用（IE嘛就加载一倍图好了），因为有 src 属性保底。
其实图片响应式加载和处理不仅仅本文内容，还有HTML的 <source> ， <picture> 等元素。这些内容可以参考我这篇文章：“HTML5响应式图片技 术 中文 图解 ”。
感谢阅读，欢迎纠错，欢迎交流。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-响应式图片srcset全新释义sizes属性w描述符 全部内容，希望文章能够帮你解决 html5教程-响应式图片srcset全新释义sizes属性w描述符 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-响应式图片srcset全新释义sizes属性w描述符的详细内容...