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

问题描述

如果我的CSS基于移动设计，然后使用 @media 查询逐渐增大的显示器（平板电脑，台式机等），移动设备将使用桌面样式？

我相信，移动设备通常会加载所有图片，即使它们不适用于自己的特定媒体大小。

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

  .splash {
 background：＃1a1a1a url（'/ assets / imageLarge.png'）no-repeat; 
} 
  

另一个用于移动版本：

  .splash {
 background：＃1a1a1a url（'/ assets / imageSmall.png'）no-repeat; 
} 
  

如果我在任何媒体查询前应用移动CSS， CSS下面使用 @media屏幕和（min-device-width：481px）{...} 的查询，移动设备还会加载大图片吗？

解决方案

行为取决于浏览器，但iOS Safari和Android Chrome会尊重媒体查询，并只下载适用的媒体查询的背景图片。 / p>

如果要检查此行为，请尝试使用Mobitest加载页面（ http://mobitest.akamai.com/ ）或系留设备。

如果您使用单独的CSS文件（我想敦促您也）浏览器将下载每个，即使它不需要它们，这是CSSOM的限制。某些浏览器基于WebKit和Blink的用户可以优先考虑样式表，因此需要首先下载页面，之后在某个时间点下载页面。

需要注意的是显示：无对内容图像，因为它不会阻止在许多情况下下载。 Tim Kadlec在此处详细介绍： http://timkadlec.com/2012 / 04 / media-query-asset-downloads-results /

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;
}

and another for the mobile version:

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

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?

解决方案

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.

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

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.

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屋！