简单的CSS3媒体查询不起作用

Question

什么应该是非常简单的根本不起作用。我只想设置一个div来显示none，直到宽度大于980px。然而，它仅在屏幕为980px时有效，但不会超过或低于!!

/* Should work while screen is 980px or less */
    @media (max-width: 980px) {
    .large-screen-hide{
        display: none;
    }
}

Answer 1

我认为你需要检查最小宽度和最大宽度。

尝试

/* Should work while screen is 980px or less */
   @media screen and (min-width: 1px) and (max-width: 980px) {
      .large-screen-hide{
          display: none;
      }
   }

来自Mozilla开发者网络上的CSS Media Queries。

Answer 2

你需要设置媒体类型

@media screen and (max-width:980px){
    .large-screen-hide {
        display:none;
    }
}