CSS（JavaScript）是否有类似于DOM元素之间的符号链接的功能，以防止使用媒体查询复制内容？_Javascript_Html_Css_Dom_Symlink

CSS（JavaScript）是否有类似于DOM元素之间的符号链接的功能，以防止使用媒体查询复制内容？

javascript html css dom

CSS（JavaScript）是否有类似于DOM元素之间的符号链接的功能，以防止使用媒体查询复制内容？,javascript,html,css,dom,symlink,Javascript,Html,Css,Dom,Symlink,我在想，如何使网站响应，在某些情况下，我更喜欢这样的结构： <html> <body> <div class="mobile-only">Content</div> <div class="desktop-only">Content</div> </body> </html> <html> <body> <div class="mob

我在想，如何使网站响应，在某些情况下，我更喜欢这样的结构：

<html>
  <body>
    <div class="mobile-only">Content</div>
    <div class="desktop-only">Content</div>
  </body>
</html>

<html>
  <body>
    <div class="mobile-only using-media-query" data-content-symlink="#content"></div>
    <div class="desktop-only using-media-query" data-content-symlink="#content"></div>
    <div id="symlinks" class="hidden">
      <div id="content">Content</div>
    </div>
  </body>
</html>

addClass(document.querySelector("#content-mobile"), "visible", false);
removeClass(document.querySelecto("#content-desktop"), "visible");


所容纳之物
所容纳之物

但是内容总是一样的，所以想法是要有这样的结构：

<html> <body> <div class="mobile-only">Content</div> <div class="desktop-only">Content</div> </body> </html>

<html> <body> <div class="mobile-only using-media-query" data-content-symlink="#content"></div> <div class="desktop-only using-media-query" data-content-symlink="#content"></div> <div id="symlinks" class="hidden"> <div id="content">Content</div> </div> </body> </html>

addClass(document.querySelector("#content-mobile"), "visible", false); removeClass(document.querySelecto("#content-desktop"), "visible");

所容纳之物
你知道这怎么可能吗？还是有更好的解决办法

PS：我知道媒体查询，我想防止重复内容，这些内容将以“仅移动”和“仅桌面”版本打印
由于OP也要求更好的解决方法，我建议使用CSS
@media
查询来更改网站在移动设备上的外观
如果您希望按屏幕大小显示不同的内容，只需添加和减去使div成为
display:none
或
display:whateveryounormally使用的类，如下所示： <html> <body> <div class="mobile-only">Content</div> <div class="desktop-only">Content</div> </body> </html> <html> <body> <div class="mobile-only using-media-query" data-content-symlink="#content"></div> <div class="desktop-only using-media-query" data-content-symlink="#content"></div> <div id="symlinks" class="hidden"> <div id="content">Content</div> </div> </body> </html> addClass(document.querySelector("#content-mobile"), "visible", false); removeClass(document.querySelecto("#content-desktop"), "visible"); 使用来自answer的函数但既然你想看两遍同样的内容，我建议你看一看 . 您可以设置与桌面完全不同的HTML元素格式，以其他方式对齐它们，使用CSS所能做的一切——基本上，重复完全相同的内容两次是没有意义的。你的第二个建议结构也不需要（即使确实存在类似的结构）-你只需要一个元素，根据你所处理的屏幕大小进行不同的格式设置。CSS的可能副本有@media Selectors，用于根据是打印还是屏幕切换样式，还用于在移动设备之间切换，平板电脑和桌面电脑。@CBroe你是对的，两倍的内容是地狱，这是我不想要的。我想找到复制内容的解决方法。但类似“符号链接想法”的东西可以在处理响应性时打开新的大门。至少我的布局定义会变得透明……”但像“符号链接想法”这样的东西可以在处理响应时打开新的门。”——当然，一个破坏球可以在你家里打开“新门”。。。但这并不意味着它会有任何意义或是一个实际的改进。你应该避免链接到w3schools，他们过去有不准确和虚假的信息，现在仍然有。例如，在您的链接中，他们写道@媒体屏幕和（最小宽度：480px）更改[…]背景颜色如果视口为480像素宽或更宽[…] ，这部分是正确的，但仅当媒体类型为屏幕且查看端口等于或大于480px 时才会更改背景，没有屏幕的@媒体（最小宽度：480px）和将匹配它们的描述。你说得对，我忘记了为什么我链接了它们而不是MDN，更改了链接，谢谢！）