css – 使用@media查询时,手机是否加载非相关查询和图像?

前端之家收集整理的这篇文章主要介绍了css – 使用@media查询时,手机是否加载非相关查询和图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我的CSS基于移动设计,然后使用@media查询逐渐变大的显示器(平板电脑,桌面等),移动设备将使用桌面风格?

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

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

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

另一个用于移动版本:

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

如果我在任何媒体查询之前应用移动CSS,并使用诸如@media屏幕和(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/

猜你在找的CSS相关文章