css - シンプルな CSS3 メディア クエリが機能しない

Question

本当に単純であるべきことは、まったく機能していません。幅が 980px を超えるまで何も表示しないように div を設定したいだけです。ただし、画面が980pxの場合にのみ機能しますが、それ以上でもそれ以下でもありません!!

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

Answer 1

min-widthとmax-widthの両方をチェックする必要があると思います。

試す

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

MozillaDeveloperNetworkのCSSメディアクエリから。

Answer 2

メディアの種類を設定する必要があります

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