重新定位响应内容

Question

我正在制作一个响应式页面，需要将部分内容移动到移动设备和桌面屏幕上 DOM 中的不同位置。

我当前的解决方案是在两个地方都复制内容，但将一个标记为仅显示移动设备的媒体查询，另一个标记为仅显示桌面的媒体查询。

这很简单且有效，但我想知道在页面加载速度、可访问性或 SEO 方面重复我的一些内容是否存在任何潜在的缺陷。或者，我可以尝试使用 JS 来移动元素，但这有其自身的问题。

我看到this 是一个类似的问题，但它并没有完全回答我的特殊问题。

感谢您的想法。

谢谢。

Answer 1

除非有非常特殊的原因需要为不同的设备视图提供特定的内容，否则采用响应式网页设计 (RWD) 会更容易且更易于维护。如果您这样做，您的布局将通过 CSS 控制，并且只有响应式提供的图像和移动菜单等项目才需要 JavaScript。

使用 RWD 的另一个额外优势是语义 HTML 标记，它使您的内容更易于访问，并且更符合 SEO。请记住，更改元素的可见性可能会对屏幕阅读器造成严重破坏——这对残疾用户来说可能是相当具有挑战性的。

Answer 2

在可访问性方面，有些人关闭了 css，所以它仍然会出现两次。