Question

我希望我的博客能够快速响应，以便在屏幕较小的设备上看起来很棒。我的朋友告诉我这个名为“@media screen”的css函数对我很有用。我可以使用 display：none; 来隐藏我想要的小屏幕。

然后我意识到 display：none; 只隐藏对象但仍然下载数据。意味着使用移动设备（屏幕较小）的访问者必须下载与使用PC的人一样多的数据。那些必须为他们没有看到的横幅下载数百KB的数据的移动访问者很差......

所以这是我的问题：

“有没有办法让某些对象（DIV）无法在较小的屏幕上加载？”

谢谢

Answer 1

你说“响应”。响应的含义是您的网站必须显示在所有设备上的所有屏幕尺寸上。因此，它必须下载所有资源并相应地显示/隐藏它们。

如果您想要移动设备的轻量级网站，我建议您应该使用特定于移动设备的网站

Answer 2

CSS和HTML适用于浏览器，他说当HTML或CSS执行任何操作时，它们总是在浏览器上并且可能已经加载。不下载DIV的最好方法是不要在HTML中添加它。如果您使用的是服务器端脚本语言（如PHP或ASP.NET），请确保将它们置于如果在移动设备上不“回显”或呈现它们的情况下。另一种方式是你使用Javascript和ajax，并在ondemand上调用元素，但这又是很多服务器端编程。

Answer 3

这取决于浏览器的实现，但是如果对象（例如图像）的父级具有“display：none;”大多数浏览器都没有下载它。

然而，此对象的HTML / CSS当然是加载/解析等，并且没有办法解决它。

这是响应式设计被高估恕我直言的原因之一。桌面/移动版本更好地提供您的网站的简易版本。

Answer 4

要回答您的问题，请为元素（图像，div等）提供类名称，以便您可以定位它们，然后在CSS中使用媒体查询。

例如
HTML

<p> some text here <img src="#" class="desktop-only"> </p>

CSS

@media (max-width: 979px) {  

.desktop-only{
display:none !important;
}

}

您可以使用您喜欢的任何组合媒体查询来操纵布局以及显示的内容。更多详情here

仅供参考，虽然这会从页面中删除元素，但几乎所有浏览器仍会下载它们，因此如果移动带宽是您关注的重点，请查看其他选项（如Adaptive Images）以自动调整图像大小。

祝你好运！

如何在较小的屏幕上加载对象

4 个答案: