CSS Sprite图像和响应式设计。它是否加载完整尺寸和响应大小？

Question

我正在优化图像并减少对我的网站的服务器请求数量，因此通过创建图像CSS Sprites来减少图像数量。

正如人们所料，对于网站设计的平板电脑/移动版布局，大多数图片都较小。

由于这个原因，我计划为精灵中包含的图标和图像的移动/平板电脑尺寸创建一个图像精灵，并使用@media查询将其切换出来，这样我就不会下载比他们实际需要的图像大得多的图像了。用于移动。

我的问题可能是一个相当简单的问题，我在@media查询之外引用了我的桌面精灵图像，在@media查询中引用了Mobile / Tablet版本。如果有人从Mobile访问该网站，它是否会同时请求桌面（由于我的移动@media查询生效而不需要）以及精灵的移动/平板电脑版本？或者它是否足够聪明，只能请求移动/平板电脑版本，因为它是@media查询所需的大小？

提前致谢

Answer 1

是的，它会下载两个图像资源。检查此问题的最简单方法是打开开发人员工具并检查网络面板中的图像请求，您应该会看到在移动设备上它会向桌面资产以及移动资产发出请求。

您可以扩展媒体查询，以便拥有一个可下载桌面资源的定位桌面和一个将下载移动资产的定位移动设备。