响应式设计：隐藏或改变元素的位置更好？ [关闭]答案

【问题标题】：Responsive design: Is it better to hide or to change position of elements? [closed]响应式设计：隐藏或改变元素的位置更好？ [关闭]
【发布时间】：2012-04-24 12:09:26
【问题描述】：

我有两个元素（菜单项）需要在响应式设计中移动（目前只有两种变体，假设一个宽度超过 750 像素，另一个小于 750 像素）：

我是否应该有两个单独的 html 块，每个变体一个，并根据设计大小隐藏/显示它们？

或者我应该只有一种 html 块和 css 样式可以与位置一起使用吗？最后一个选项与我计划的设计有点复杂，所以真正的问题可能是：拥有两个不同的 html 块是否太糟糕了？该页面将有 javascript 和 ajax 交互，虽然我不确定到什么程度。提前谢谢你。

【问题讨论】：

这个问题不适合我们的问答形式。我们希望答案通常涉及事实、参考资料或特定专业知识；这个问题可能会征求意见、辩论、争论、投票或扩展讨论。
更多的是实际的效率优势（并且已经命名）而不是意见。最好不要有不同的 html 块，因为它违反了可访问性、可用性和编程规则。

标签： html css position responsive-design

【解决方案1】：

我在响应式设计中尝试牢记的一些经验法则：

尽可能将其保留在 CSS 中。 You can control so much solely by changing the CSS 如果你的标记是理智的。推论：不要过度污染 HTML。
尽量减少发送到浏览器的数据量。移动数据连接速度慢、不可靠，而且数据上限和限制越来越多。
页面应该合理没有任何CSS。想想 Googlebot 或屏幕阅读器会“看到”什么。任何网站都应该如此，但这并不意味着它经常是。

基于这些，我会说不要使用两个单独的 HTML 块。

【讨论】：

【解决方案2】：

说明它是否“糟糕”是主观的，并且与您的目标相关。从可访问性的角度来看，相同的标记出现两次并只是切换隐藏一个或另一个并不理想，但是如果不了解更多关于您的设计的细节，很难确定它应该或不应该是做了一个特定的方法。我会说，一般来说，它不应该那么困难，因为你的标记不应该在考虑布局或设计的情况下进行结构化。

【讨论】：

您对可访问性的看法是正确的，我不敢相信我错过了这一点。谢谢

【解决方案3】：

我认为这取决于您如何更改设计。如果只是设计具有不同的宽度、高度、图像等的情况，那么拥有多个 HTML 将违反编程的标准规则之一：

http://en.wikipedia.org/wiki/Don%27t_repeat_yourself

但是，如果设计差异是结构性的，那么使用不同的 HTML 就可以了，而不是试图通过 CSS 来强制它。

顺便说一句，如果可能的话，通过 CSS 实现它的一个好处是，当您的老板（不可避免地）出现并要求提供专门为 1024 像素或更宽的设备设计的第三个版本时。如果您选择了 CSS 路线，那么添加另一组尺寸将需要几分钟的工作。使用 HTML 路由，您将陷入困境，让一切变得更加复杂。

【讨论】：

块的样式发生变化，这并不难实现，但它也改变了流体div内的位置。这是一个 6 阶段的设计，所以我必须对其进行几次调整。谢谢你的回答。

【解决方案4】：

根据我的观点，使用两个 html 块不是一个好主意...在决定隐藏哪个和显示哪个时可能会造成混淆...但是在不了解您的设计和目的的情况下，它不能决定...但一般尽量避免两个或多个 html 块...

【讨论】：