如果我将CSS基于移动样式,然后使用@media查询来逐步显示较大的内容(平板电脑,台式机等),那么移动设备会使用台式机样式吗?
@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) {...},那么移动设备也会加载大型图片吗?
@media screen and (min-device- width: 481px) {...}
行为取决于浏览器,但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/