视网膜图像-picturefill.js和媒体查询

Question

当通过创建两倍大的第二张图像来适应视网膜显示时，我见过picturefill.js建议防止下载较大的图像，除非需要它们。

但这不就是'min-device-pixel-ratio‘媒体查询已经完成的吗？或者，即使不满足特定的查询，CSS中的图像也总是会被下载？

Answer 1

不能，只有当图片符合正确的CSS标准时才会被下载。因此，您可以安全地通过picturefill.js使用媒体查询。看看这篇文章，它基于媒体查询对图像请求进行了测试：http://timkadlec.com/2012/04/media-query-asset-downloading-results/。同样，您也可以使用Chrome Dev Tools Network选项卡来查看加载时请求的图像-您会发现只有媒体查询中满足的图像才会被下载。