CSS Sprite 图像和响应式设计。它是否同时加载全尺寸和响应尺寸？
CSS Sprite Images and Responsive Design. Does it load both the full size and responsive size?
我正在优化图像并减少对我的网站服务器的请求数量，因此我通过创建图像 CSS Sprites 来减少图像数量。
正如人们所预料的那样，对于网站设计的 Tablet/Mobile 布局，大多数图像都较小。
因此，我计划为精灵中包含的图标和图像的 mobile/tablet 大小创建一个图像精灵，并使用 @media 查询将其切换出来，这样我就不会下载比大得多的图像他们实际上需要用于移动设备。
我的问题可能相当简单，我在任何@media 查询之外引用了我的桌面精灵图像，并且在@media 查询中引用了 Mobile/Tablet 版本。如果有人从移动设备访问该网站，它会同时请求桌面（由于我的移动@media 查询生效而不需要）和精灵的 mobile/tablet 版本吗？或者它是否足够聪明，只请求 mobile/tablet 版本，因为这是 @media 查询所需的大小？
提前致谢
是的，它将下载两个图像资源。检查这一点的最简单方法是打开开发人员工具并检查网络面板中的图像请求，您应该看到在移动设备上它会向桌面资产和移动资产发出请求。
您可以扩展您的媒体查询，这样您就有一个目标桌面设备将下载桌面资产，一个目标移动设备将下载移动资产。
我正在优化图像并减少对我的网站服务器的请求数量，因此我通过创建图像 CSS Sprites 来减少图像数量。
正如人们所预料的那样，对于网站设计的 Tablet/Mobile 布局，大多数图像都较小。
因此，我计划为精灵中包含的图标和图像的 mobile/tablet 大小创建一个图像精灵，并使用 @media 查询将其切换出来，这样我就不会下载比大得多的图像他们实际上需要用于移动设备。
我的问题可能相当简单，我在任何@media 查询之外引用了我的桌面精灵图像，并且在@media 查询中引用了 Mobile/Tablet 版本。如果有人从移动设备访问该网站，它会同时请求桌面（由于我的移动@media 查询生效而不需要）和精灵的 mobile/tablet 版本吗？或者它是否足够聪明，只请求 mobile/tablet 版本，因为这是 @media 查询所需的大小？
提前致谢
是的，它将下载两个图像资源。检查这一点的最简单方法是打开开发人员工具并检查网络面板中的图像请求，您应该看到在移动设备上它会向桌面资产和移动资产发出请求。
您可以扩展您的媒体查询，这样您就有一个目标桌面设备将下载桌面资产，一个目标移动设备将下载移动资产。