Question

我有两个单独的<style>标记，它们都包含大量样式和媒体查询。第一组样式适用于桌面查看器，另一组适用于移动查看器。当两组媒体查询都运行时，它会混淆显示，因为不同的组件在不同的大小下可见。我一直在根据用户显示动态链接样式表，但我被要求在一个页面上完成所有操作而不需要额外的文件加载。有什么方法可以通过javascript专门应用一组样式或其他样式吗？

Answer 1

您可以在JavaScript中进行移动检测，然后根据您想要的样式添加一个类。即。

<body>
  <div class="mobile">
    .. your page ..
  </div>
</body>

或

<body>
  <div class="desktop">
    .. your page ..
  </div>
</body>

Answer 2

您可以在CSS链接中链接

<link rel='stylesheet' media='screen and (max-width: 701px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 702px)' href='css/large.css' />

根据javascript条件应用样式

2 个答案: