一尘不染

使用@media查询时,电话是否会加载非相关查询和图像?

css

如果我将CSS基于移动样式,然后使用@media查询来逐步显示较大的内容(平板电脑,台式机等),那么移动设备会使用台式机样式吗?

我认为,通常,移动设备将加载所有图像,即使它们不适用于其特定的媒体大小。这意味着它将加载所有图像,并隐藏与基于查询的样式表不匹配的图像。

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

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

另一个用于移动版本:

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

如果我在进行任何媒体查询之前应用了移动CSS,并使用诸如这样的查询在下方添加了大型媒体CSS @media screen and (min-device- width: 481px) {...},那么移动设备也会加载大型图片吗?


阅读 195

收藏
2020-05-16

共1个答案

一尘不染

行为取决于浏览器,但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/

2020-05-16