html5响应式图片

本文介绍，使用srcset和picture实现网页的响应式图片。所谓响应式就是说，服务端提供几供大小规格的照片，浏览器根据窗口大小自动选择合适的照片。

案例1：适应retina屏
高像素比例屏，例如mac的屏幕，是以2*2个像素显示原本一个像素的内容，看起来会更加细腻，因此如果要显示320*160px照片，最佳的实际照片大小是640px * 320px。用img的srcset达到这种效果。例如说准备三张图片

写下如下html代码：

<img id="myImg" alt="测试分辨率" srcset="1x.jpg 1x, 2x.jpg 2x" src="none.jpg">

我们告诉浏览器，如果像素比例是1x，就使用1x.jpg，如果是2x就使用2x.jpg(大图)，如果老的浏览器不认识 srcset，就使用src。当然， 这些不是绝对的，只是对浏览器的建议。浏览器会有自己的算法，决定用哪个来源，例如可能根据当时的网络通畅情况。 在笔者的mac上，chrome浏览器显示2x.jpg。通过这样的方式，让使用高像素比例屏的用户得到更好的体验。 2.让适配布局，选择大小合适的照片。 对于适配型的布局，也就是说，照片和文字大小会跟随浏览器窗口的变大而变大，变小而变小。手机的屏幕大部分是320px宽度的，而电脑的分辨率可能会从800~1920之间变化，所以如果用小图，在小屏上合适，在大屏上变得模糊，如果使用大图，在手机小屏上将会浪费流量。因此，如果我们能提供几种规格的照片，让浏览器去选择合适大小的，就会很方便。纯html，不需要写js，各种if/else的判断。 如果只是提供照片的src，浏览器无法得知照片的真实大小，在未下载之前，因此得显式地提供每种规格的照片大小。如下

<img id="fox" srcset="fox-300px.jpg 300w, fox-600px.jpg 600w" src="fox-300px.jpg"/>

在设定srcset的内容时指示图片的大小，单位为w，这样浏览器就知道每张图片在实际大小。
同时设定图片占据50%的宽度

#fox{ width: 50%;}

然后在不同的浏览器测试一下，在1440宽的显示器，firefox/chrome打开显示是600px的照片，和预期一样，同时，发现safari8不支持上面的格式，但支持第一点中描述的格式。安卓手机(android 5)的qq和微信客户端都不支持，chrome for android支持，另外，手机显示屏是320px，chrome使用的是