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

Question

应该很简单的东西根本不起作用。我只想设置一个 div 在宽度大于 980px 之前不显示。但是，它仅在屏幕为 980 像素时才有效，但仅此而已！

/* 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 媒体查询。

Answer 2

你需要设置媒体类型

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