Question

我目前正在开发一个处理响应式设计的项目，整个布局应该使用HTML和CSS来实现。我知道可以使用java脚本将内容从一个列布局移动到另一个列布局而不重复内容，但是使用HTML和CSS可以实现相同的效果吗？

举例说明以下内容将在桌面设计中呈现如下

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |
|  --------  --------   |
-------------------------

但是，设计师已将div1移至div2以下的移动设计。

--page--------
|  --------  |
|  |div 2 |  |
|  --------  |
|  --------  |
|  |div 1 |  |
|  --------  | 
--------------

显然，块级元素堆叠的自然方式是相反的方式。

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |  <--- shown on desktop
|  --------  --------   |
|  --------             |
|  |div 1 |             |  <--- hidden on desktop
|  --------             |
-------------------------

--page--------
|  --------  |
|  |div 1 |  | <--- hidden on mobile
|  --------  | 
|  --------  |
|  |div 2 |  | <--- shown on mobile
|  --------  |
|  --------  |
|  |div 1 |  | <--- shown on mobile
|  --------  | 
--------------

使用上述内容，div1的内容重复。这对SEO不好吗？显然它不是最佳的，因为内容在DOM等中出现两次，因此速度受到影响（尽管可能可以忽略不计）。

我是否可以实施其他基于javascript的解决方案，以解决问题？

非常感谢任何建议。

Answer 1

如果您隐藏和取消隐藏元素，SEO的重复内容是响应式页面的真正问题。代码仍然在DOM中呈现，如果搜索引擎可以看到代码（即使用户看不到输出），它仍将依赖于您。上面的答案都没有为此提供真正的解决方案，而且说实话我现在也不能。

我正朝着从DOM中使用javascript删除元素的方向前进，但这非常混乱，也不理想。

上面的媒体查询答案不会改变您仍然将HTML输出到具有重复内容的DOM的事实。

Answer 2

如果div是可预测的大小（例如50em），您可以使用position: relative和负top值来抵消它们。这样可以让您在不更改标记的情况下显示重新排序的流程。

例如：

#div1 {
    float: left
    clear: both;
    height: 50em;
    position: relative;
    top: 50em;
}

#div2 {
    float: left
    clear: both;
    height: 50em;
    position: relative;
    top: -50em;
}

将其置于媒体查询中，它会为您提供所需的结果。

Answer 3

CSS order属性可用于重新排序flex个孩子。
Bootstrap4引入了一些（响应）flex实用程序，可用于更改flex子项的顺序。

<div class="row">
    <div class="col-sm-6 order-2 order-sm-1">div 1</div>
    <div class="col-sm-6 order-1 order-sm-2">div 2</div>
</div>

考虑上面的基于引导程序的代码段。对于div 1及更高版本（md，lg，xl）的设备，div 2和sm按来源顺序显示，而div 2出现在div 1 xs之前设备。

Answer 4

当然，决斗内容是最好避免的问题。我们应该始终创建可以任意高度的元素，以允许CMS内容。

我建议加价订单应该是：

--page--------
|  --------  |
|  |div 2 |  |
|  --------  |
|  --------  |
|  |div 1 |  |
|  --------  | 
--------------

...正如设计师在移动布局中指定的那样。宽度往往比高度更容易知道，所以在桌面上，你可以做“旧的switcharoo”来改变他们的位置。隐含了Clearfix。例如在桌面上：

.div1, .div2 {
  float: left;
  position: relative;
  width: 200px;
}
.div2 {
  right: -200px;
}
.div1 {
  left: -200px;
}

...应该给你这个布局：

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |
|  --------  --------   |
-------------------------

（我没有检查过这段代码 - 很可能我的左右混淆了）

这有意义吗？

Answer 5

我知道我迟到了，但我希望这对其他人有所帮助。

我会通过移动优先来解决它。 #div1应该是移动分辨率中显示的第一个，#div2是第二个。

然后我会让他们两个都漂浮，所以＆＃34;第一个＆＃34;将在需要时显示在右侧。

以下是一个示例（最好在整页中查看响应性）：

＆＃13;

* { box-sizing: border-box; }
div { border: 1px solid gray; }
#div1 { background: lightblue; }
#div2 { background: yellow; }
@media (min-width: 768px) {
  div {
    display: inline-block;
    width: 50%;
    float: right;
  }
}

＆＃13;

<div id="div1">
  <p>This div will be shown on top on mobile resolutions, and will be in the right in any other resolution!</p>
  <p>We could say it will be a main content holder in mobile, and secondary in desktop</p>
</div>
<div id="div2">
  <p>This div will be shown on bottom on mobile resolutions, and will be in the left in any other resolution!</p>
  <p>We could say it will be a main content holder in desktop, and secondary in mobile</p>
</div>

＆＃13;

Answer 6

您可以使用CSS Flexbox的order属性执行此操作：假设您的标记是：

.my-flex-container {
  display: flex;
}

/* change order on devices <= 768px */
@media (max-width: 768px) {
  .my-flex-container {
    flex-direction: column;
  }
  #div1 {
    order: 2;
  }
  #div2 {
    order: 1;
  }
}

<div class="my-flex-container">
  <div id="div1">Content of div1</div>
  <div id="div2">Content of div2</div>
</div>

希望它对您来说很好

避免响应页面的重复内容

6 个答案: