我希望我的博客能够快速响应,以便在屏幕较小的设备上看起来很棒。我的朋友告诉我这个名为“@media screen”的css函数对我很有用。我可以使用 display:none; 来隐藏我想要的小屏幕。
然后我意识到 display:none; 只隐藏对象但仍然下载数据。意味着使用移动设备(屏幕较小)的访问者必须下载与使用PC的人一样多的数据。那些必须为他们没有看到的横幅下载数百KB的数据的移动访问者很差......
所以这是我的问题:
“有没有办法让某些对象(DIV)无法在较小的屏幕上加载?”
谢谢
答案 0 :(得分:3)
你说“响应”。响应的含义是您的网站必须显示在所有设备上的所有屏幕尺寸上。因此,它必须下载所有资源并相应地显示/隐藏它们。
如果您想要移动设备的轻量级网站,我建议您应该使用特定于移动设备的网站
答案 1 :(得分:1)
CSS和HTML适用于浏览器,他说当HTML或CSS执行任何操作时,它们总是在浏览器上并且可能已经加载。不下载DIV的最好方法是不要在HTML中添加它。如果您使用的是服务器端脚本语言(如PHP或ASP.NET),请确保将它们置于如果在移动设备上不“回显”或呈现它们的情况下。另一种方式是你使用Javascript和ajax,并在ondemand上调用元素,但这又是很多服务器端编程。
答案 2 :(得分:0)
这取决于浏览器的实现,但是如果对象(例如图像)的父级具有“display:none;”大多数浏览器都没有下载它。
然而,此对象的HTML / CSS当然是加载/解析等,并且没有办法解决它。
这是响应式设计被高估恕我直言的原因之一。桌面/移动版本更好地提供您的网站的简易版本。
答案 3 :(得分:0)
要回答您的问题,请为元素(图像,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)以自动调整图像大小。
祝你好运!