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?
如果我的CSS以移动样式为基础，然后使用@media查询来显示更大的显示(平板电脑、桌面电脑等)，移动设备会使用桌面样式吗?
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?
如果我在任何媒体查询之前应用移动CSS，并使用@media screen和(min-device-width: 481px){…}，移动设备也会加载大图像吗?
3 个解决方案
#1
33
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.
行为取决于浏览器，但iOS Safari和Android Chrome将尊重媒体查询，并只下载背景图像用于适用的媒体查询。
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
如果您希望检查这种行为，请尝试使用Mobitest (http://mobitest.akamai.com/)或绑定设备加载页面。
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.
如果您使用独立的CSS文件(我建议您不要使用)，即使不需要它们，浏览器也会下载它们，这是csang的一个限制。有些浏览器，如WebKit和Blink等，会优先考虑样式表，以便首先下载呈现页面所需的样式表，然后再下载其他的样式表。
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/
需要注意的一件事是显示:内容图像上没有显示，因为它在很多情况下不会阻止下载。Tim Kadlec在这里对此做了更多的研究:http://timkadlec.com/2012/04/media- queryasset -results/
#2
8
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Tim Kadlec为这一趋势做了一些令人惊叹的研究——媒体查询和资产下载结果
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
你的具体问题在测试4中得到了回答——结果参差不齐。最好对两个图像都进行媒体查询。
#3
3
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
这听起来似乎很大程度上依赖于浏览器，但我想，任何称职的移动浏览器都会尝试通过不加载标记为不加载的图像(可能不加载整个样式表)来减少数据使用。此外，许多移动浏览器不喜欢被识别为移动浏览器。我知道我讨厌在我的iPad上打开一个站点，一个移动样式表迫使我在我的9.7英寸屏幕上查看一个单列站点。
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
因此，媒体查询是不可靠的，但仍然是值得的(它们真的不会伤害任何东西，只要它们被负责任地使用)，这无助于一个相当迟钝(但仍然不错)的问题;是时候做一些测试了!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
大多数现代桌面浏览器都附带了开发工具。我目前最喜欢的是FireFox的黑色和漂亮的web inspector (3D视图尤其适合死于它)。但是手机呢?移动用户中最大的部分不会出现在开发工具的浏览器上。
Well, you have a couple options:
你有几个选择:
- Firebug Lite has some mixed results on mobile browsers, but is an excelent choice in most cases where other inspectors are unavailable. It does seem to work in iOS and other mobile browsers with HTML5 support, though.
- 在移动浏览器上，Firebug Lite有一些混合的结果，但是在大多数情况下，在其他检查器不可用的情况下，它是最好的选择。不过，在支持HTML5的iOS和其他移动浏览器中，它似乎确实适用。
- This question suggests using something called "weinre". I've never used it, but it looks legit enough.
- 这个问题建议使用“weinre”这个词。我从未用过它，但它看起来足够合法。
- If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
- 如果您不介意只获取一些特定的浏览器，许多浏览器都包含开发工具。比如谷歌的Android Chrome !
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
无论你选择什么，你都会寻找某种资产查看器;也许时间轴视图。任何一种工具都可以让你看到页面加载的内容、加载顺序以及加载时间。
Good luck!
好运！
#1
33
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.
行为取决于浏览器，但iOS Safari和Android Chrome将尊重媒体查询，并只下载背景图像用于适用的媒体查询。
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
如果您希望检查这种行为，请尝试使用Mobitest (http://mobitest.akamai.com/)或绑定设备加载页面。
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.
如果您使用独立的CSS文件(我建议您不要使用)，即使不需要它们，浏览器也会下载它们，这是csang的一个限制。有些浏览器，如WebKit和Blink等，会优先考虑样式表，以便首先下载呈现页面所需的样式表，然后再下载其他的样式表。
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/
需要注意的一件事是显示:内容图像上没有显示，因为它在很多情况下不会阻止下载。Tim Kadlec在这里对此做了更多的研究:http://timkadlec.com/2012/04/media- queryasset -results/
#2
8
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Tim Kadlec为这一趋势做了一些令人惊叹的研究——媒体查询和资产下载结果
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
你的具体问题在测试4中得到了回答——结果参差不齐。最好对两个图像都进行媒体查询。
#3
3
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
这听起来似乎很大程度上依赖于浏览器，但我想，任何称职的移动浏览器都会尝试通过不加载标记为不加载的图像(可能不加载整个样式表)来减少数据使用。此外，许多移动浏览器不喜欢被识别为移动浏览器。我知道我讨厌在我的iPad上打开一个站点，一个移动样式表迫使我在我的9.7英寸屏幕上查看一个单列站点。
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
因此，媒体查询是不可靠的，但仍然是值得的(它们真的不会伤害任何东西，只要它们被负责任地使用)，这无助于一个相当迟钝(但仍然不错)的问题;是时候做一些测试了!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
大多数现代桌面浏览器都附带了开发工具。我目前最喜欢的是FireFox的黑色和漂亮的web inspector (3D视图尤其适合死于它)。但是手机呢?移动用户中最大的部分不会出现在开发工具的浏览器上。
Well, you have a couple options:
你有几个选择:
- Firebug Lite has some mixed results on mobile browsers, but is an excelent choice in most cases where other inspectors are unavailable. It does seem to work in iOS and other mobile browsers with HTML5 support, though.
- 在移动浏览器上，Firebug Lite有一些混合的结果，但是在大多数情况下，在其他检查器不可用的情况下，它是最好的选择。不过，在支持HTML5的iOS和其他移动浏览器中，它似乎确实适用。
- This question suggests using something called "weinre". I've never used it, but it looks legit enough.
- 这个问题建议使用“weinre”这个词。我从未用过它，但它看起来足够合法。
- If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
- 如果您不介意只获取一些特定的浏览器，许多浏览器都包含开发工具。比如谷歌的Android Chrome !
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
无论你选择什么，你都会寻找某种资产查看器;也许时间轴视图。任何一种工具都可以让你看到页面加载的内容、加载顺序以及加载时间。
Good luck!
好运！