无论屏幕大小如何，如何从 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 的工作方式，您编写的任何规则都将应用于所有匹配元素，除非有更具体或更新的内容覆盖它。

由于您知道自己始终希望在移动设备上使用移动样式，因此通过从移动样式中删除媒体查询，您可以将移动演示设置为默认外观。

因为您知道您只是有时（即使 "sometimes" 确实是 "almost always"）希望桌面样式出现在更大的屏幕上，您可以为自己设置一种切换它们的方法。对我来说，最简单的方法是在 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/

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

How to force CSS @media style from JS regardless of screen size?

html

javascript

css

media-queries