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/