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

【问题标题】：Is hiding/showing divs the best practice in responsive design?隐藏/显示 div 是响应式设计的最佳实践吗？
【发布时间】：2013-05-18 17:20:48
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css responsive-design user-experience

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您刚刚开始使用响应式设计，我强烈建议您查看Twitter Bootstrap，尤其是他们的responsive scaffolding。他们的断点真的很有帮助！

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

也就是说，依赖于不同视口的显示/隐藏 - 在我个人看来 - 只有在完全必要的情况下才真正可以接受。

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

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

【讨论】：