9

我目前正在做一个处理响应式设计的项目，整个布局应该使用 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 的解决方案可以缓解这个问题？

任何建议将不胜感激。

4

6 回答 6

6

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

我正朝着从 DOM 中使用 javascript 实际删除元素的方向发展，但这会变得非常混乱并且也不理想。

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

于 2013-10-16T14:53:39.270 回答
2
  • CSSorder属性可用于对子项重新排序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并div 2以源顺序出现在sm更高版本的设备（md、lg、xl）上，而在设备上div 2出现之前。div 1xs

于 2018-01-13T14:04:13.227 回答
1

如果 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;
}

将其放在媒体查询中，它将为您提供所需的结果。

于 2013-04-22T19:13:07.473 回答
1

当然，决斗内容是一个最好避免的问题。我们应该始终创建可以是任何高度的元素，以允许 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|   |
|  --------  --------   |
-------------------------

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

这有意义吗？

于 2013-10-03T08:59:30.493 回答
1

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

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

然后我会让它们都向右浮动，因此“第一个”将在需要时显示在右侧。

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

* { 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;
  }
}
<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>

于 2016-12-13T19:51:02.613 回答
1

您可以使用 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>

希望它对你有用

于 2020-03-16T12:40:11.157 回答