在使用@media查询时，手机是否加载非相关查询和图像？
如果我的CSS基于移动样式，然后使用@media查询逐渐变大的显示器（平板电脑，桌面等），移动设备会使用桌面样式吗？
我相信通常情况下，移动设备将加载所有图像，即使它们不适用于它自己的特定介质尺寸。 这意味着它会加载所有的图像，并隐藏不符合其基于查询的样式表。
我想要做的是使用一个背景为更大的版本的网站：
.splash { background: #1a1a1a url('/assets/imageLarge.png') no-repeat; }
另一个是移动版本：
.splash { background: #1a1a1a url('/assets/imageSmall.png') no-repeat; }
如果我在任何媒体查询之前应用手机CSS，并使用@media screen and (min-device-width: 481px) {...}查询添加下面的大媒体CSS，移动设备也会加载大图像吗？
行为依赖于浏览器，但iOS Safari和Android Chrome会尊重媒体查询，只下载适用媒体查询的背景图像。
如果要检查此行为，请尝试使用Mobitest（ http://mobitest.akamai.com/ ）或受限设备加载页面。
如果你使用单独的CSS文件（我不希望你），即使浏览器不需要它们，浏览器也会下载它们，这是CSSOM的限制。 一些浏览器，例如基于WebKit和Blink的浏览器会优先考虑样式表，因此需要渲染页面的浏览器会首先被下载，而其他浏览器则会在稍后的某个点被下载。
有一点要注意的是显示：没有内容的图像，因为它不会阻止下载在许多情况下。 Tim Kadlec在这里探索这个更多： http : //timkadlec.com/2012/04/media-query-asset-downloading-results/
Tim Kadlec已经为此做了一些很棒的研究 – 媒体查询和资产下载结果
您的具体问题在testing＃4中得到了解答 – 结果是不明确的。 最好有媒体查询您的图像。
这听起来像它将主要依赖于浏览器，但我想像任何移动浏览器值得盐它将尝试减less数据使用不加载图像（可能不加载整个样式表）被标记为不适合它。 此外，许多移动浏览器更喜欢不被识别为移动浏览器。 当我在iPad上打开一个网站时，我知道我讨厌它，移动样式表强制我在9.7英寸屏幕上查看单列网站的一个细条。
因此，媒体查询是不可靠的，但仍然是值得的（只要他们的使用是负责任的，他们真的不会伤害任何东西），这并不是一个相当钝（但仍然是好）的问题。 时间做一些testing！
大多数现代桌面浏览器都与开发工具打包在一起。 我目前最喜欢的是FireFox的黑暗和漂亮的networking检查器（3D视图是特别死的）。 但是在手机上呢？ 您的移动用户中最大的部分将不在使用开发工具的浏览器上。
那么，你有几个select：
- Firebug Lite在移动浏览器上有不同的结果，但是在大多数情况下，其他检查员都不可用。 不过，它似乎可以在支持HTML5的iOS和其他移动浏览器上运行。
- 这个问题build议使用一个叫做“weinre”的东西。 我从来没有使用它，但它看起来足够合理。
- 如果您只需要针对某些浏览器就可以了，那么许多开发人员工具都可以使用。 如Google Chrome for Android ！
无论您select什么，您都会寻找某种资产浏览器。 也许是一个时间表视图。 任何types的工具，可以让你看到什么页面加载，以何种顺序加载，以及加载需要多长时间。
祝你好运！
