html - CSSのメディアクエリ

Question

幅 1024px のみのメディア クエリを作成するにはどうすればよいですか?

これは、幅320px以上で作成した既存のcssです。

@media (min-width: 320px) {

} 

幅1024pxのみの方法は？

Answer 1

私はあなたがこれを望んでいると信じています：

@media (min-width: 320px) and (max-width: 1023px) {
    /* styles for width > 320px but < 1023px */
}


@media (min-width: 1024px) {
 /* styles for width > 1024px only */
}

この方法では、スタイルをオーバーライドする必要はありません。

それ以外の場合は、次のことができます。

@media (min-width: 320px) {
    /* styles for width > 320px - applied to width > 1024px too */
}


@media (min-width: 1024px) {
 /* styles for width > 1024px only */
}

これは、必要に応じて最初のメディア クエリ スタイルをオーバーライドする必要があるという点で異なります。

Answer 2

1023 以下や 1025 以上ではなく、1024だけが必要な場合は、できると思います。

@media (width: 1024px) {
    ....
 }

最小/最大プレフィックスはオプションです。その上の w3 エントリを参照してください。

Answer 3

このように書いてください：

@media (max-width:1024px) {
 body{..}

} 

これをチェックしてくださいhttp://jsfiddle.net/YhsSK/