隐藏/显示div是响应式设计的最佳实践吗？

Question

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

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

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

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

这被认为是“最佳做法”还是推荐的方式？

Answer 1

在我的网站中，我只会这样做，如果这不涉及双重加载资源，如不同大小的图像等。有时隐藏/显示div是使复杂网站转换为简单的移动网站的唯一方法。另一个警告是复制你的导航元素，因为谷歌会因页面上有太多链接而受到惩罚。

Answer 2

如果您刚开始使用自适应设计，我强烈建议您查看Twitter Bootstrap，尤其是responsive scaffolding。他们的破发点非常有用！

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

那就是说，依靠不同视口的表演/隐藏是 - 在我个人看来 - 只有在完全必要时才真正可以接受。

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

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