2

我想让我的博客具有响应性，以便在屏幕较小的设备上看起来不错。我的朋友告诉我这个名为“@media screen”的 CSS 函数对我来说非常有用。我可以使用display:none; 在较小的屏幕上隐藏我想要的任何内容。

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

所以这是我的问题：

“有没有办法让某些对象 (DIV) 不被加载到较小的屏幕上？”

谢谢你

4

4 回答 4

3

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

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

于 2013-06-13T06:22:17.957 回答
1

CSS 和 HTML 在浏览器上工作，已经说过，当 HTML 或 CSS 做任何事情时，它们总是在浏览器上并且可能已经加载。最好不要下载该 DIV，不要将其添加到您的 HTML 中。如果您使用服务器端脚本语言，例如 PHP 或 ASP.NET，请确保将它们置于移动设备上时不要“回显”或呈现它们的条件。另一种方法是使用 Javascript 和 ajax，并按需调用元素，但这又是很多服务器端编程。

于 2013-06-13T06:15:45.253 回答
0

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

例如
HTML 

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

CSS 

@media (max-width: 979px) {  

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

}

您可以使用任何您喜欢的组合媒体查询来操作布局和显示的内容。更多细节在这里

仅供参考，虽然这会从页面中删除元素，但它们仍然会被几乎所有浏览器下载，因此如果移动带宽对您来说是一个关键问题，请查看其他选项，例如自适应图像以自动调整图像大小。

祝你好运！

于 2013-06-13T12:17:09.987 回答
0

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

然而，这个对象的 HTML/CSS 当然会被加载/解析等，并且没有办法绕过它。

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

于 2013-06-13T06:20:10.080 回答