by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=5045
一、本文内容干货量远不及之前的那篇
首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“响应式图片srcset全新释义sizes属性w描述符”一文。
提前说明下，本文的示意图片均来自：The anatomy of responsive images
我只是把上面的英文变成了中文，一些图片时候实时效果可以去原页面观摩。
另外，补充了一些遗漏的关于响应式图片处理的tips.
1. 作为背景图片，image-set()这厮
这个是我自己补充的，精力有限，我就不作图了，嘻嘻，使用示意如下(目前需要-webkit-私有前缀)：
.example {
background-image: -webkit-image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}
兼容性如下：
2. 尺寸固定，密度变化
这里出现了srcset，兼容性如下：
3. 尺寸和密度都变化
4. 尺寸，密度，资源都变化
5. 不同的图片类别
二、直接结语
本文主要图解了几种HTML侧的响应式图片的用法说明，希望可以对移动端同学的学习有所帮助。
以上~
最后，祝大家今天能遇到如下图所示的好事情！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=5045
（本篇完）
相关文章
- 为什么HTML <picture>元素很少见人使用？ (1.000)
- 响应式图片srcset全新释义sizes属性w描述符 (0.348)
- 点击图片放大查看交互效果的最佳实现 (0.348)
- 我们一起学习CSS image-set() (0.217)
- 震惊，有生之年居然看到CSS attr()全属性支持 (0.217)
- 详细介绍HTML favicon尺寸 格式 制作等相关知识 (0.174)
- 见多识广，介绍Web开发中current开头的一些API属性 (0.174)