如何显示：无；移动设备的CSS效果？
如果我们使用 display:none; 隐藏了一些东西例如：图片，渲染引擎还会下载吗？如果是，这是否意味着在移动设备中打开同一网页时，将不需要下载不必要的额外重量？
这进一步意味着修改移动设备的同一网页可能不是一个好主意。请指教。谢谢。
If we have hidden some stuff using display:none; for example: images , will it still be downloaded by rendering engine? If yes, does that mean while opening the same web page in mobile, it's going to be unnecessary extra weight to download?
This can further mean that modifying the same webpage for mobile can be a bad idea. Please advice. Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
是的，整个页面都会被下载（隐藏元素和所有元素）。在页面被浏览器的 CSS 引擎处理之前，
display:none毫无意义。Yes, the entire page is downloaded (hidden elements and all). The
display:noneis meaningless until the page has been processed by the browser's CSS Engine.有多种方法可以停止下载图像，无论图像是内联的还是 CSS 样式中的背景图像，或者是否是通过媒体查询引入的。它适用于几乎所有移动设备（除了“Fennec 10.0+”是唯一仍然下载图像的设备。-参见 Tim Kadle 的测试结果
）资产下载测试结果的研究位于：
http://timkadlec.com/ 2012/04/media-query-asset-downloading-results/
它表示，对于背景图像，隐藏父元素。如果您无法做到这一点，请使用媒体查询将背景图像设置为仅在屏幕或设备尺寸达到特定尺寸时下载。只需通过放入媒体查询来定义您想要隐藏/不下载的内容即可。是不是很奇妙。
还有另一个出色的测试可以使用，非常简单，位于：
http://timkadlec.com/mq/test4.php
在此测试中，您只需调整浏览器的大小窗口模仿“桌面”或“移动”，以查看是否正在下载与媒体查询相关的图像。您只需单击要测试的每个场景的链接即可。
There are several ways to stop an image being downloaded, wether the image is inline or is a background image within a CSS style, or wether it is being brought in through a media query. It works for nearly all mobile devices (except 'Fennec 10.0+' being the only device that still downloaded the image.- see Tim Kadle's test results)
Tim Kadlec's 'Media Query & Asset Downloading Test Results' research at:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
It says, for a background image, hide the parent element. If you can’t do that, then use a media query to set the background-image to only download when screen or device size is at certain size. Just define what you want hidden / to not download by putting inside media queries. Isn't it marvellous.
Also another brilliant test to use, so simple, at:
http://timkadlec.com/mq/test4.php
On this test you just resize your browser window to mimic wether 'desktop' or 'mobile' to see wether it is downloading images related to the media queries. You simply click the links for each scenario you want to test.