为响应式站点复制 HTML 或使用 JS 移动元素

Question

我正在为 tablet/mobile 设备设计的网站要求我移动元素（从左侧边栏到右侧、更改顺序等）。这些元素包括简单的文本和图像（非常小，徽标）。

我的问题是，解决此问题的最佳方法是什么？目前我只有两种方法。

1) 复制 HTML 内容，然后 show/hide 使用 CSS 媒体查询。我担心的是它对 SEO 不友好，内容/图像仍然会被渲染，即使是隐藏的。这会不会给我带来性能问题？

2) 使用JS移动元素。我担心的是禁用 JS 的人仍然会看到旧地方的内容，也许这个 JS 解决方案对性能的影响更大？

非常感谢您就这种情况下的最佳做法提供一些意见。

这是我想要实现的目标：

Answer 1

你提到你不愿意使用 display: hidden 因为它们被渲染了。如果我理解正确，那么您可以在右侧使用 display: none 。然后在你的媒体查询中，你可以设置左边的内容显示：none，右边的内容显示：initial。如果我理解正确的话，那应该可以正常工作。则不会为隐藏元素分配space。

例如：

.leftDiv {
   display: initial;
}

.rightDiv {
   display: none;
}

@media screen only and (max-width: 1000px) {

.leftDiv {
   display: none;
}

.rightDiv {
   display: initial;
}

Answer 2

问题有点矛盾:)

首先，WEB 是 2016，如果你说的是响应式布局，支持手机、平板电脑、台式机 - 他们会 JavaScript支持，所以你不用担心。 - 这是您问题 #2 的答案。没有 JS 的人比例极低，低于 1%。

CSS 媒体查询足以做出良好的响应。有时你需要用 JS 添加辅助方法来操作 DOM 并使其更高级。您可以查看如何 they do responsiveness with classes in Twitter Bootstrap.

有时内容会在 HTML 中重复，但一旦由于 CSS 媒体查询的可见性规则而无法在屏幕上同时显示 - 它 就不会这样做对 SEO 的任何伤害.

有一种方法可以使事情变得过于复杂，RESS: Responsive Web Design + Server-Side Components，并根据检测到的用户代理提供不同的 HTML 布局。

为响应式站点复制 HTML 或使用 JS 移动元素

Duplicate HTML or move elements with JS for responsive site

html

javascript

css

responsiveness