我正在优化图像并减少对我的网站的服务器的请求数量，因此我通过创建图像 CSS Sprites 来减少图像的数量。
正如人们所预料的那样，对于网站设计的平板电脑/移动设备布局，大多数图像都较小。
因此，我计划为 sprite 中包含的图标和图像的移动/平板电脑尺寸创建图像 sprite，并使用 @media 查询将其切换，这样我就不会下载比实际需要大得多的图像适用于移动设备。
我的问题可能相当简单，我在任何@media 查询之外引用了我的桌面 Sprite 图像，并在@media 查询中引用了移动/平板电脑版本。如果有人从移动设备访问该网站，它会同时请求桌面(由于我的移动@media 查询生效而不需要)和手机/平板电脑版本的 Sprite 吗？或者它是否足够聪明，只请求移动/平板电脑版本，因为这是 @media 查询所需的大小？
提前致谢
最佳答案
是的，它将下载两个图像资源。检查这一点的最简单方法是打开开发人员工具并检查网络面板中的图像请求，您应该看到在移动设备上它会向桌面 Assets 和移动 Assets 发出请求。
您可以扩展您的媒体查询，这样您就有一个目标桌面将下载桌面 Assets ，一个目标移动将下载移动 Assets 。
关于CSS Sprite 图像和响应式设计。它是否同时加载全尺寸和响应尺寸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38897052/