css - Retina images-picturefill.js 和媒体查询

Question

当通过创建两倍大的第二个图像来适应 Retina 显示器时，我看到推荐使用 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 选项卡查看加载时请求的图像 - 您会发现只有满足媒体查询条件的图像才会被下载。