一、响应式设计
（一）、响应式设计的由来
在手机、平板这类小型化设备出现之前，是没有响应式设计这个概念的，以前的开发者只需设计一版PC端网页即可。后来随着iPhone等智能设备的风潮席卷世界，移动端浏览器技术逐渐成熟，用户在移动设备上对网页内容的需求爆棚，此时的移动端必须受到重视。针对移动设备的特点（比如屏幕小、带宽小、资费贵），初期的开发人员为移动设备专门搭建了另外的站点（像这样：m.domain.com.），当用户使用移动设备访问主站点时，服务端的探测脚本会根据探测到的结果去重定向到移动站点上去。但问题是探测脚本有时候并不靠谱，导致用户依然停留在主站点上，用户体验很差。
直到2010年，
Ethan Marcotte在文章Responsive Web Design中提出了“响应式设计”的概念，他指出鉴于移动设备数量疯长和M.dot站点的不理想，我们还是应该回归网页流体自然的本质。他提出的相对单位使得无论设备的尺寸大小，设计者都能灵活地进行布局。
（二）、响应式设计的优点和缺陷
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，本意是使原本PC上的网站兼容手机和平板。大部分响应式网页是通过媒体查询，加载不同样式的CSS文件实现。
同时，当网页中需要图片这种媒介时，最初的响应式处理方式缺点也就暴露无遗：
一般在手机上访问响应式网页里的图片时，只是把图片分辨率做了一个缩放，手机还是下载了那一张大图片，一般手机又没有Retina屏，很浪费带宽。而且现在手机网速也不是很快，打开一个这种网站要耗费很长时间。
二、<picture>标签的出现
如上所述，没有对图片进行处理的响应式方案是不完整的，一个理想的自适应图片策略应该包括以下3点：
1.适合屏幕。大多数桌面布局内的图片太大，不适合在移动设备的小屏幕内显示。自适应的策略是，通过CSS或其他方式调整图片的大小，以便它适合移动设备的屏幕。
2.预留带宽。尽管高清图片与视网膜显示屏正在普及，但你要知道加载高清图片会吃掉相当多的带宽。因此，当用户在移动设备上浏览网站时，我们可以提供一个较低的分辨率的图片，这样可以使浏览速度倍增。
3.艺术取向。当图片被挤压到一个狭窄的显示屏上，而且往往这些图片有很多细节时，图片看起来会不那么优雅。此时，我们完全可以提供另外一张图片，这张图片只显示原图的主体部分。
直到<picture>标签出现之前，也有很多针对响应式图片的处理方案，但都是通过js脚本或其它第三方服务达到目的。<picture>标签作为HTML5的一部分，尽管还未得到浏览器厂商普遍的支持，依然无法改变它被认可的地位。
其实，我们可以通过picturefill来增强<picture>的兼容性，它的原理是通过加载HTML时，异步加载picturefill.js解析<picture>标签，然后再获取标签中的图片。因为需要和解析HTML这个过程异步执行，所以在使用<picture>之前，应当在<head>里引用picturefill.js。
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
