如果我的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/