工具介绍
注意:请使用 Picturefill。一项针对响应式且负责任的移动优先图片的实验
:warning: 此项目已归档,仓库不再维护。我们建议您使用 picturefill。https://github.com/scottjehl/picturefill
这是什么呢? 此技术的目标是在 响应式布局 中提供优化的、上下文相关的图像大小,在不同分辨率下使用截然不同的图像大小。理想情况下,这可以使开发人员在 HTML 中使用移动优化的图像,并指定适用于具有较大屏幕分辨率的用户的更大的图像大小 – 而无需请求两种图像大小,也无需 UA 嗅探。
- 从文档的 HEAD 部分引用 "responsiveimgs.min.js"：
它是如何工作的? 只要 rwd-images.js 加载完毕,它就会测试屏幕宽度,如果宽度大,它会将一个 BASE 元素插入到页面的头部,使所有后续的图像、脚本和样式表请求都通过一个名为 "/rwd-router/" 的虚拟目录进行处理。 当这些请求到达服务器时, .htaccess 文件会确定请求是否是响应式图像(是否具有 ?full 请求参数?)。它会立即将响应式图像请求重定向到其完整大小,而所有非响应式图像请求则通过忽略 "/rwd-router/" 部分的 URL 重写而到达其正确的目的地。