Javascript 使用按钮和媒体查询切换显示状态

我正在寻找一种最好的方式，可以通过页面上的按钮切换显示状态，但也可以根据媒体查询覆盖显示状态。在大屏幕上，我希望默认为水平布局，并提供切换垂直布局的选项。在较小的屏幕上，我希望默认为垂直布局，不允许切换

我当前的解决方案依赖于级联来覆盖样式表中的样式，我希望避免这种情况，因为它要求我的样式按特定顺序排列

HTML:

应用布局水平的默认布局。还应用布局，以便使用@media查询覆盖特定布局

JS:

在单击按钮时切换特定的-horiz和-vert类

$('#btn').click(function() {
  $('#layout').toggleClass('layout--vert layout--horiz');
});

这个解决方案运行正常，但我想知道是否有更好的方法来实现这一点

---

注意：这里有一个。

我认为更好的方法可能是使用两个单独的样式表，一个具有水平布局，另一个具有垂直布局，然后您可以通过单击功能切换样式表以获得首选布局。这里有一个链接，我很快就找到了

---

除非将JS包含到前端框架中，否则您的解决方案离优化不远。这可能就是为什么您会收到指示您进行代码审查的注释。若要改进解决方案，请仅使用一个选择器进行状态更改。这将调用布局水平的两个状态和一个默认状态。一旦您将媒体查询切换为选择大屏幕而不是小屏幕，就很容易进行此更改

HTML:

JS:

---

您似乎将堆栈溢出误认为是代码审阅站点。@forTruce如果您想改进工作代码，可以将其从堆栈溢出中删除，然后发布到“我不要求代码审阅”。我提供了一个有效的解决方案来证明我已经尝试解决了这个问题，但是，正如我所说的，我的解决方案是一个依赖于稍后在样式表中重写样式的黑客。我完全在寻找其他方法，而不是我自己的审查。使用其他样式表将需要浏览器请求额外页面，而且它也不允许我通过@media querys执行这些相同的样式更改。这只适用于两种显示状态之间的切换。我还在window.resize上添加了一个去抖动回调，以便在调整窗口大小时自动添加/删除布局水平。此外，我在javascript中添加了一个sentinel类布局vert，没有相关联的css用于指示用户是否特别选择了垂直布局，即使是在更大的屏幕大小上。这样，即使通过调整大小，我也可以保留该首选项。@forTruce我以为您希望通过btn而不是window.resize来切换布局。你的新解决方案听起来太复杂了，因为你在构建什么。你是对的！我有一些css遗留在我的非平凡的问题，使它看起来像我需要的窗口。调整大小。在第二次查看后，我可以删除window.resize，并有一个简单的解决方案。谢谢

#btn {
  display: block;
}

.layout--horiz p {
  display: inline;
}
.layout--vert p {
  display: block;
}

@media screen and (max-width: 600px) {
  #btn {
    display: none;
  }

  .layout p {
    display: block;
  }
}

$('#btn').click(function() {
  $('#layout').toggleClass('layout--vert layout--horiz');
});

<div id='layout' class='layout layout--horiz'>
  <a href="#" id='btn'>Toggle</a>
  <p>This</p>
  <p>is</p>
  <p>a</p>
  <p>test</p>
</div>

#btn {
  display: none;
}

.layout p {
  display: block;
}

@media screen and (min-width: 601px) {
  #btn {
    display: block;
  }

  .layout.layout--horiz p {
    display: inline;
  }
}

$('#btn').click(function() {
  $('#layout').toggleClass('layout--horiz');
});