html - CSSのメディアクエリ条件

Question

私は3つの異なる次元のメディアクエリを書きました。最初のスタイルは320px幅用で、別の3クエリは

1. 320px以上

2. 768px

3. 1024px

   cssは、初期サイズ320px、nad768pxより上の320pxnで完全に機能しています。しかし、1024pxのcssは適用されません。

これが私のcssクエリです

@media (min-width: 320px) {
For above 320px 
}
@media (min-width: 1024px) {
For 1024px; this is not applying
}
@media (min-width: 768px) {
for 760px
}

Answer 1

3番目のメディアクエリのルールは、常に2番目のルールを上書きします。

該当する場合、1024pxが768pxを上書きするように、最後の2つの順序を入れ替える必要があります。

Answer 2

幅の狭い順に並べてみます。例えば：

@media (min-width: 320px) {
For above 320px 
}

@media (min-width: 768px) {
for 760px
}

@media (min-width: 1024px) {
For 1024px; this is not applying
}

CASCADING スタイル シートは上から下に読み込まれます。