javascript - 复制 HTML 或使用 JS 移动元素以实现响应式站点

Question

我工作的网站和平板电脑/移动设备的设计要求我移动元素(从左侧边栏到右侧，更改顺序等)。这些元素包括简单的文本和图像(非常小， Logo )。

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

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

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

非常感谢在这种情况下就最佳实践提供一些意见。

这是我要实现的目标:

Answer 1

问题有点矛盾:)

首先，现在是 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 布局。