CSS メディア クエリを記述するときに、「OR」ロジックを使用して複数の条件を指定する方法はありますか?
私は次のようなことをやろうとしています:
/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
...
}
ベストアンサー1
2 つ以上の異なるルールを指定するには、コンマを使用します。
@media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
からhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/メディアクエリの使用
カンマは、複数のメディア クエリを 1 つのルールに結合するために使用されます。カンマで区切られたリスト内の各クエリは、他のクエリとは別々に扱われます。したがって、リスト内のいずれかのクエリが true の場合、メディア ステートメント全体が true を返します。つまり、リストは論理 or 演算子のように動作します。