3

我是响应式设计的新手，我注意到实现它的一种方法是根据屏幕宽度隐藏和显示 div。例如：

@media screen and (min-width: 30em) and (max-width: 60em) {

    #desktop { visibility:hidden; }
    #mobile { visibility:visible; }
}

#desktop { visibility:visible; }
#mobile { visibility:hidden; }

这被认为是“最佳实践”还是有推荐的方法？

4

2 回答 2

0

如果你刚开始响应式设计，我强烈建议你看看Twitter Bootstrap，尤其是他们的响应式脚手架。他们的断点真的很有帮助！

Bootstrap 直接提供的一件事是 CSS 类，用于根据当前视口宽度显示/隐藏元素。

也就是说，在我个人看来，依靠不同视口的显示/隐藏是唯一可以接受的。

要记住的关键是，在响应式开发中，您也在为移动设备进行开发，这些设备可能会或可能不会在慢速移动网络连接上。尽可能优化标记以避免不必要的文件大小非常重要。

此外，使用显示/隐藏不可避免地意味着您的页面中有很多重复，这将导致可访问性问题（例如屏幕阅读器），并最终可能导致您的网站在搜索引擎中受到惩罚。

于 2013-05-23T12:00:24.347 回答
0

在我的站点中，我只会在不涉及双重加载资产（例如不同大小的图像等）的情况下这样做。有时隐藏/显示 div 是将复杂站点转换为简单移动站点的唯一方法。另一个注意事项是复制您的导航元素，因为谷歌会因页面上的链接过多而受到惩罚。

于 2013-05-23T11:47:29.773 回答