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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

ここに私の例を残したかったの.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;
   }
}

Answer 4

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