Объединение нескольких медиазапросов
Используйте операторы and, or и not, чтобы объединять медиавозможности в сложные запросы.
«Объединение нескольких медиазапросов» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Оператор and
Ключевое слово and требует одновременной истинности всех условий. Это полезно для выбора устройств одновременно по их размеру и типу.
<div class="box">and operator demo</div>
Диапазон с оператором and
Сочетание min-width и max-width с помощью and позволяет выбрать определённый диапазон ширины области просмотра (стили только для планшетов):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
Запятая как OR
Запросы, разделённые запятыми, работают как OR — стили применяются, если совпадает ANY из запросов:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
Оператор отрицания
not отрицает весь медиазапрос. Используйте его осторожно — он применяется ко всему выражению запроса, а не только к первому условию.
<div class="doc">not operator demo</div>
Отрицание в круглых скобках (современный синтаксис)
Современные медиазапросы уровня 4 позволяют использовать not() как функцию для отдельных характеристик:
<div class="panel">not() function demo</div>
Ключевое слово «только» (устаревшее)
Ключевое слово only использовалось, чтобы скрывать медиазапросы от устаревших браузеров, которые не поддерживали медиахарактеристики. Современные браузеры его игнорируют, но оно безвредно.
<div class="box">only keyword demo</div>
Вложенные медиазапросы (вложенный CSS)
При использовании нативной вложенности CSS медиазапросы можно записывать внутри блоков селекторов:
<div class="card">Nested media query demo</div>
Сочетание мобильных устройств и высокого DPI
Выберите мобильные устройства (с небольшим экраном и высоким DPI):
<div class="icon"></div>
Печать и цвет
Несколько медиахарактеристик для стилей печати, которые применяются только к цветным принтерам:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Медиазапрос в @import
Медиазапросы можно применять во время импорта, чтобы условно загружать целые таблицы стилей (однако это блокирует отображение, поэтому используйте такой подход умеренно):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Логические свойства в сложных запросах
Как правило, более простые запросы легче поддерживать. Избегайте объединения слишком большого количества условий. Если запрос становится сложным, рассмотрите возможность изменить структуру CSS, а не усложнять сам запрос.
Быстрая проверка
Какой медиазапрос применяет стили, если ширина области просмотра составляет не менее 600px ИЛИ устройство находится в альбомной ориентации?
Повторение
and требует истинности всех условий. Запятые работают как OR между запросами. not отрицает весь запрос. Сочетайте min-width и max-width, чтобы выбрать диапазон. Современный CSS поддерживает вложенность медиазапросов внутри блоков селекторов и синтаксис диапазонов для более понятных выражений.
Часто задаваемые вопросы
Урок «Объединение нескольких медиазапросов» бесплатный?
Да — полный текст урока «Объединение нескольких медиазапросов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Объединение нескольких медиазапросов»?
Используйте операторы and, or и not, чтобы объединять медиавозможности в сложные запросы. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Объединение нескольких медиазапросов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис и распространённые точки перелома
- Запросы ширины, высоты и ориентации
- Prefers-Color-Scheme и Prefers-Reduced-Motion
- Объединение нескольких медиазапросов