メディアクエリ-2つの幅の間

141

CSS3メディアクエリを使用して、幅が400pxより大きく900pxより小さい場合にのみ表示されるクラスを作成しようとしています。これはおそらく非常に単純で、明らかなものがないのはわかっていますが、理解できません。私が思いついたのは以下のコードです、どんな助けにも感謝します。

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

css media-queries

— ラッセルサイシ
ソース

268

値を切り替える必要があります。

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}

デモ：http : //jsfiddle.net/xf6gA/（背景色を使用しているため、確認が簡単です）

— サンプソン
ソース

4

max-widthとmin-width逆にする必要があります。この方法の方が読みやすい

— machineaddict

33

@Jonathan Sampson複数の@mediaを使用すると、ソリューションが間違っていると思います。

（min-width first）を使用する必要があります。

@media screen and (min-width:400px) and (max-width:900px){
   ...
}

— ウォーカーヌス
ソース

10

受け入れられた答えは決して間違いではありませんが、min-widthからmax-widthを使用する方がより明確で読みやすい規則だと思います。

— Dave Powers

1

@DavePowersと同意します。私の場合、メディアクエリは@WalkerNussのようにフォーマットされていましたが、最初のandを忘れていました@media screen。最初の挿入はandこれを私のために修正しました。

— カイルヴァセッラ

4

私の.scss例をここに残したいと思ったので、私はそのベストプラクティスを考えています。特に、カスタマイズを行う場合は、幅を1回だけ設定するのがいいと思います。どこにでもそれを適用するのは賢明ではありません、あなたは指数関数的に人的要因を増やします。

私はあなたのフィードバックを楽しみにしています！

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}

— JasParkety
ソース

ミックスインでパラメーターを使用した場合、それは「関数」である可能性があります...

— 1984

3

.class {
    display: none;
}
@media (min-width:400px) and (max-width:900px) {
    .class {
        display: block; /* just an example display property */
    }
}

スニペットを展開

— チャーリー
ソース