css - CSS メディア クエリ演算子

Question

演算子and、not、onlyおよびコンマ,が CSS で何を意味し、何をするのかを非常に簡単な言葉で説明してくれませんか?

Answer 1

4 つの演算子は集合論ロジックを実装します。そのコンテキストでは、それぞれの意味は次のとおりです。

• ,: 「ユニオン」と同等。たとえば@media screen, print、画面または印刷デバイスに一致します

• and: 「交差点」と同等。たとえば@media screen and (min-device-width: 1920px)、解像度 1920px の画面デバイスに一致します

• not: 「設定差」に相当。たとえば@media not screen and (color)、画面ではなく、色をサポートするデバイスに一致します

• only: 「適切なスーパーセット」に相当します。たとえば@media only screen and (color)、画面のみで色のみをサポートするデバイスに一致します

参考文献

• メディア クエリのネスト | ヘイスタック

• メディア クエリのロジック | CSS トリック

• メディア クエリ レベル 4: メディア クエリの評価