5

メディアクエリを使用して最大幅980pxの要素を非表示にしようとしていますが、何らかの理由でまだ表示されています。

min-widthでメディアクエリを使用すると、要素は消えますが、このコードではまだ表示されており、理由を理解できますか？

@media (max-width: 980px) {
    .welcome-msg  {
        display:none;
    }
}

誰かが私のコードに何か問題があるのを見ることができますか？現在、テストでFFレスポンシブデザインビューを使用しています。

4

1 に答える 1

5

現在のmax-widthメディア クエリでdisplay:noneは、ドキュメントの幅が 980px ではなく 980px になるまで適用されます。

あなたの質問から、あなたは反対のことが起こることを望んでいるようです。それがあなたが成功した理由ですmin-width. から に切り替えると問題が解決max-widthするはずです。min-width

display: noneそれ以外の場合は、非メディア クエリ css で要素を設定し、メディア クエリで使用する必要display:blockがありmax-widthます。

CSS

/* Only applies while screen is 980px or less */
@media (max-width: 980px) {
.welcome-msg  {
        display:none;
    }
}

/* only applies while screen is 980px or greater */
@media (min-width: 980px) {
.welcome-msg  {
        display:none;
    }
}

/* if you must use max-width, this is a solution */
/* otherwise, use min-width IMHO */
.welcome-msg  {
        display:none;
}

@media (max-width:980px) {
  .welcome-msg  {
   display:block; /* element will only show up if width is less than or equal to 980px */
  }
}

それがあなたが達成しようとしていることではない場合、あなたの質問によりよく答えるために、 Codepenの例があると役に立ちます。

幸運を！

于 2012-12-17T15:02:42.917 に答える