web-dev-qa-db-ja.com

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

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

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

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

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

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

213
Sampson

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

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

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

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

フィードバックをお待ちしております！

// 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;
   }
}
3
JasParkety