使用@media 查询时，手机是否会加载不相关的查询和图像? [英] When using @media queries, does a phone load non-relevent queries and images?

问题描述

如果我的 CSS 基于移动样式，然后使用 @media 查询逐渐变大的显示器(平板电脑、台式机等)，移动设备会使用桌面样式吗?

If I base my CSS on mobile styling, then use @media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?

我相信通常情况下，移动设备会加载所有图像，即使它们不适用于其自身特定的媒体尺寸.这意味着它将加载所有图像并隐藏与其基于查询的样式表不匹配的图像.

I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.

我想要做的是为网站的较大版本使用一个背景:

What I am trying to do is use one background for the larger version of the site:

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

另一个用于移动版本:

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

如果我在任何媒体查询之前应用移动 CSS，并使用类似 @media screen 和 (min-device-width: 481px) {...} 的查询添加下面的大型媒体 CSS, 移动设备也会加载大图片吗?

If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like @media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?

推荐答案

行为取决于浏览器，但 iOS Safari 和 Android Chrome 将尊重媒体查询并且只下载适用媒体查询的背景图像.

Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.

如果您想检查这种行为，请尝试使用 Mobitest (http://mobitest.akamai.com/) 或系留设备.

If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.

如果您使用单独的 CSS 文件(我强烈建议您不要使用)，即使浏览器不需要它们，浏览器也会下载每个文件，这是 CSSOM 的限制.一些浏览器，例如基于 WebKit 和 Blink 的样式表优先考虑样式表，因此首先下载呈现页面所需的样式表，稍后再下载其他样式表.

If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.

需要注意的一件事是 display:none 在内容图像上，因为它不会在许多情况下阻止下载.Tim Kadlec 在此处对此进行了更多探讨:http://timkadlec.com/2012/04/media-query-asset-downloading-results/

One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

这篇关于使用@media 查询时，手机是否会加载不相关的查询和图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！