javascript - 无论屏幕大小如何，如何从 JS 强制使用 CSS @media 样式？

Question

我的网站风格分为两部分:

@media only screen and (max-width: 725px)  {
    /* a lot of styles for small screens */
}

@media only screen and (min-width: 725px) {
    /* a lot of styles for big screens */
}

我有一种情况，尽管当前屏幕尺寸更宽，但我还是喜欢强制使用小屏幕样式。所以，基本上，我想在桌面上强制使用移动设备。

请记住，我无法更改 css 中的太多内容，样式应保留在媒体查询中。

实现此目标的最佳方法是什么？我更喜欢使用 JavaScript 的解决方案。

Answer 1

我不确定是否可以为不匹配的媒体强制呈现媒体查询样式。不过，我觉得您已经非常清楚地列出了挑战，所以我有一个关于您如何以我认为可行的方式解决问题的建议。

CSS 的工作方式，您编写的任何规则都将应用于所有匹配元素，除非有更具体或更新的内容覆盖它。

因为您知道您总是希望在移动设备上使用移动样式，所以通过从您的移动样式中删除媒体查询，您可以将移动演示设置为您的默认外观。

因为您知道您只是有时(即使“有时”真的是“几乎总是”)希望桌面样式出现在更大的屏幕上，您可以设置自己的方法来切换他们。对我来说，最简单的方法是在 body 标签和每个桌面声明的开头添加一个 ID。

//small screen styles
    /* a lot of styles for small screens */

//conditional wide-screen styles
@media only screen and (min-width: 725px) {
    #wideLayout //styles
    #wideLayout //styles
    #wideLayout //styles
}

如果你的 CSS 是这样排列的，宽屏样式只有在屏幕足够宽并且有一个 ID 为 #wideLayout 的顶级父级时才会应用>。并且(根据要求)您可以使用 javascript 简单地通过切换该 ID 来切换这些样式。

示例:

$('#toggleLayout').on('click',function(){
  if ($('section').attr('id') == "wideLayout"){
    $('section').attr('id','');
  } else {
    $('section').attr('id','wideLayout');
  }
});

/*small screen styles*/
  div {background-color:#484;display:inline-block;width:50px;height:50px;margin:10px;}
  
    
/*conditional wide-screen styles*/
/*I changed the query here so the preview window would be wide-enough to demonstrate*/
@media only screen and (min-width: 125px) {
    #wideLayout div {background-color:#848;display:block;width:auto;height:80px;margin:10px 0 0 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="toggleLayout">Toggle Layout</button>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>

这里有一个 jsfiddle，你可以用它来玩我的解决方案:https://jsfiddle.net/sq8jhu93/2/