响应式设计：隐藏或改变元素的位置是否更好？

Question

我有两个要素（菜单项）的困境，我需要在响应式设计中移动（它现在只有两个变体，让我们说一个宽度超过750像素，另一个用于低于750像素宽）：

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

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

Answer 1

我试图记住响应式设计的一些经验法则：

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

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

Answer 2

说明它是否“坏”是主观的，与你的目标相关。从可访问性的角度来看，将相同的标记出现两次并且只是切换隐藏其中一个是不理想的，但是在不知道更多关于设计细节的情况下，很难确定它应该或不应该是做了一个特定的方式。我会说，一般来说，它应该不那么困难，因为你的标记不应该考虑到布局或设计。

Answer 3

我认为这取决于你如何改变设计。如果仅仅是设计具有不同宽度，高度，图像等然后具有多个HTML的情况将违反标准编程规则之一：

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

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

btw如果可能的话，通过CSS实现这一目标的一个好处就是当你的老板（不可避免地）出现并要求专门为1024px或更宽的设备设计的第三个版本时。如果您选择了CSS路线，那么添加另一组尺寸将需要几分钟的时间。使用HTML路由，您将被锁定，使一切变得更加复杂。

Answer 4

根据我的观点，使用两个html块并不是一个好主意...它可能会导致混淆决定隐藏哪一个以及显示哪一个......但是如果不了解你的设计和目的，它就不能决定...但总的来说，试着避免两个或更多的html块...