屏幕大小更改时显示块忽略媒体查询更改？答案

【问题标题】：display block ignores media query change when screen size changes?屏幕大小更改时显示块忽略媒体查询更改？
【发布时间】：2021-03-23 19:45:44
【问题描述】：

尝试创建响应式菜单。到目前为止，它适用于小屏幕，但是当增加屏幕尺寸时，菜单不会返回到大屏幕的媒体查询设置，它只显示来自 javascript 的切换类。

因此，如果打开菜单并且我增加了屏幕，它不会修复菜单样式，如果它被关闭并且屏幕增加，也会发生同样的情况

const burgerArray = document.querySelectorAll(".barra");
const navBar = document.getElementById('myLinks')

function buttonChange() {
  for (i = 0; i < burgerArray.length; i++) {

    burgerArray[i].classList.toggle('change')
    console.log(burgerArray[i])
  }
  if (navBar.style.display == "block") { // if is menuBox displayed, hide it
    navBar.style.display = "none";
  } else { // if is menuBox hidden, display it
    navBar.style.display = "block";
  }
}

@media (max-width: 468px) {
  .myLinks {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .menudo {
    display: flex;
    justify-content: space-between;
  }
  #burgers {
    display: none;
  }
  .myLinks {
    display: block;
  }
}

;

<div class="menudo">
  <div class="logo">
    <a href="/index.html" id="logo"><img src="img/PicsArt_02-11-12.55.38 (1).png" width=7 0px alt=""></a>
  </div>
  <label for="checkbox">
            <div onclick="buttonChange()" id='burgers' class="burger-menuu">
                <div class="barra" id="bar1" ></div>
                <div class="barra" id="bar2" ></div>
                <div class="barra" id="bar3" ></div>
            </div>
        </label>
  <nav class="myLinks" id="myLinks">
    <a id="menu-land" href="/artic.html">Articles</a>
    <a id="menu-land" href="img/Francisco Gonzalez Resume.pdf" target="blank">Resume<!--<i class="fa fa-shopping-cart" aria-hidden="true">--></i>
        </nav> 
    </div>

【问题讨论】：

如果您使用内联样式，请确保您的 css 有 !important 可以覆盖，但更好的方法是添加/删除显示块/无的类，这样会更容易从 css 控制一切。您还可以将显示设置为“”以删除 js 中调整大小时的内联样式
还是不行。尝试在新环境中进行，一切正常。唯一的问题是它在调整大小时不应用样式。
我不知道您尝试了什么，或者您是否完全理解我的评论

标签： javascript css

【解决方案1】：

您的媒体查询之间存在一些差距。尝试设置您的 min-width: 469px 以在调整视口大小时应用其他样式

@media (max-width: 468px) {
  .myLinks {
      display: block;
      background-color: bisque;
  }
}

@media only screen and (min-width: 469px) {

.menudo {
   display: flex;
   justify-content: space-between;
}
#burgers {
   display: none;
}
   .myLinks {
       display: block;
       background-color: lightgreen;
   }
};

<div class="menudo">
    <div class="logo"><a href="/index.html" id="logo"><img src="img/PicsArt_02-11-12.55.38 (1).png" width= 70px
            alt=""></a>
        </div>
        <label for="checkbox">
            <div onclick="buttonChange()" id='burgers' class="burger-menuu">
                <div class="barra" id="bar1" ></div>
                <div class="barra" id="bar2" ></div>
                <div class="barra" id="bar3" ></div>
            </div>
        </label>
        <nav class="myLinks" id="myLinks">
            <a id="menu-land" href="/artic.html">Articles</a>
            <a id="menu-land" href="img/Francisco Gonzalez Resume.pdf" target="blank">Resume<!--<i class="fa fa-shopping-cart" aria-hidden="true">--></i>
        </nav>
    </div>

【讨论】：

谢谢。只是想让它先工作。它确实切换了菜单，但是当我调整屏幕大小时，它会保持 javascript 显示而不是对媒体查询做出反应
@FranciscoAzocar 媒体查询 css 不会替换 javascript 设置的内联 css
我尝试添加一个 !important 但仍然无法正常工作。我想试试这个“。您还可以设置显示以删除在 js 中调整大小时的内联样式”，但不知道该怎么做。能详细说明一下吗？

【解决方案2】：

由于 document.getElementById('table').styles.* 通过 DOM 对元素进行内联样式设置，其优先级高于通过 CSS 进行的媒体查询。什么都不会发生，因为 DOM 元素现在具有更高优先级的样式，因此忽略 MQ 规则。

因此，为了为媒体查询创建更高的优先级，我按照@Huangism 的建议使用了 !important 并更改了这段代码：

.myLinks {
   display: block;
   background-color: lightgreen;
}

对于这个块：

#myLinks {
   display: block !important;
}

【讨论】：