https://github.com/scottjehl/picturefill
这个视频我们再来看一下使用 <img> 标签的响应式图像，这里我们要使用一个小插件 … picturefill … 它可以让我们在页面中指定多个版本的图像…
使用媒体查询来判断到底要用哪一个版本的图像 …
安装
先去下载 picturefill … 打开这个地址 … 点击 Download Zip …
解压一下 … 找到里面的 picturefill.js … 把它放在我们的网页项目里 … 你可以使用资料包的 xx-xx 这个目录下的项目 …
新建一个 js 文件夹 …
回到网页 … 在 <head> 标签里 … 去嵌入 picturefill.js 这个脚本文件 ...
script:src … 位置是在 js 目录下的 picturefill.js
使用
下面我们在 showcase 这个容器里去添加图像 ….
这里我们不直接使用 <img> 标签插入图像… 而是使用 <span> 标签来代替 …
先定义一组 <span> 标签 …. 然后在这个标签上，添加一个 data-picture 属性 …
再添加一个 data-alt 属性 …. picturefill 会把这个标签替换成 <img> 标签 … data-picture 这里会替换成 <img> 标签的 src 也就是 source 属性 ….
在里面会使用对应版本的图像 ….
data-alt 属性就相当于是 <img> 标签的 alt 属性 … 也就是图像的代替文本 …
在这组 <span> 标签里 … 可以添加不同版本的图像 …
同样使用 span 标签来指定图像的来源 … 里面再加上一个 data-src 属性 … 还有 data-media 属性 …. 这里我们需要三组这样的标签 ….
span[data-src][data-media]*3
data-src 属性的值就是图像的来源 … 在第一组 <span> 标签里，我们可以指定一个默认的图像 … images/01.jpg …
后面的 data-media 属性 … 可以去设置媒体查询 …. 这个原始的图像，可以去掉这个属性 …
在第二组 <span> 标签里 … 我们让可视窗口宽度小于等于 480px 的时候，使用这里指定的图像来源 …
先在 data-src 里输入这个图像的位置 …. images/01_s.jpg …
然后在 data-media 里，去设置媒体查询 …. (max-width:480px) ….
最后一组 <span> 标签，去设置在高清屏幕 .. 也就是视网膜屏幕下，可视窗口宽度小于等于 480px 的时候的图像 …
先定义图像的位置 … images/01_s_2x.jpg ….
再去设置媒体查询 …. (max-width:480px) and (-webkit-min-device-pixel-ratio:2) …
保存一下 ….
打开浏览器 …
在 showcase 这里，会显示原始的图像 … 也就是在第一组 <span> 标签里指定的图像来源 …
调整浏览器窗口的宽度 …
可视窗口小于等于 480px 的时候 … 会使用在第二组 <span> 标签里指定的图像 …
下面我们再打开 iOS 模拟器 …
这是模拟视网膜屏幕的设备 …
你会看到，页面上会使用在第三组 <span> 标签里指定的 宽度是 960px 的图像 …
