css - 响应式设计 - 媒体查询 - 如何不加载某些图像

Question

好的，所以我使用媒体查询和 display: none; 设计了一个不显示非常小屏幕尺寸的图像的响应式布局。

到目前为止一切顺利。但这些图像仍会下载到这些设备上，导致带宽增加。

使这些图像不在指定设备上下载的正确方法是什么？

如有任何回应，我们将不胜感激!

Answer 1

我能想到的两个选项:

1. 使用浏览器嗅探检测服务器上的小型设备，并向它们发送不引用图像的不同 HTML。
2. 使用 background-image 或 :before/:after 通过 CSS 而不是 HTML(如果您愿意，可以在 style 属性中)显示图像。和 content (IE 6 或 7 不支持)，并将该 CSS 代码包装在媒体查询中，以便它仅在屏幕较大的设备上显示。