Как использовать логические операторы в медиазапросах CSS?

Для использования логических операторов в медиазапросах CSS можно применять следующие операторы: skillbox.ru basicweb.ru

1. and. skillbox.ru basicweb.ru Используется как логическое «И». skillbox.ru Запрос выполняется только в том случае, если истинно каждое из условий. skillbox.ru Например, стиль применится, если ширина окна браузера больше 480 px и меньше 1024 px. skillbox.ru
2. or и ,. skillbox.ru Оператор используется как логическое «ИЛИ». skillbox.ru Результат медиазапроса истинен, если истинно хотя бы одно из условий. skillbox.ru Например, стиль применится, если в запросе есть указывающее устройство ввода, неточное ИЛИ точное. skillbox.ru
3. not. skillbox.ru basicweb.ru Оператор используется как логическое «НЕ». skillbox.ru Например: @media not screen { /Стиль применится, если у устройства нет экрана/}
4. only. skillbox.ru basicweb.ru Оператор нужен, чтобы обезопасить себя от некорректной работы некоторых старых браузеров, читающих синтаксис CSS2 вместо CSS3. skillbox.ru Например: @media only screen and (orientation: portrait) { /Стиль не применится, если браузер не поддерживает синтаксис CSS3/}

Чтобы контролировать, в какой последовательности будут применяться логические операторы, можно использовать в запросах группирующие скобки. skillbox.ru