css function @media 屏幕和（最大宽度：768px）在 jquery 中的任何倡议？

Question

css function @media screen and (max-width: 768px) 是否存在任何倡议？ 我做了一个响应式导航。 但是当我在移动屏幕尺寸上将元素的显示从无切换到阻塞时，它也会出现在初始屏幕尺寸上。 有什么办法可以避免这种情况？

Answer 1

也许您没有以正确的顺序声明 CSS 规则，但无论如何您没有提供任何代码，所以我们不知道。

您必须进行以下细微调整 - @media only screen and (max-width: 768px) 。 下面是一个代码示例和一个 JS Fiddle - 尝试调整浏览器 window 的大小，您将看到 CSS 规则将在您调整大小后应用。

<div id="myElement">
  <p>
    hello
  </p>
</div>

--

#myElement {
   display: none; 
}

@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
  #myElement {
    display: block;
  }
}

JS小提琴示例： https://jsfiddle.net/1dqxkgyt/3/