1. Введение

Медиа-запросы (media queries) - это основа отзывчивого дизайна. Мы используем их для определения того, как должен меняться дизайн на основе размеров области просмотра (viewport). Но синтаксис min-width и max-width может вызывать путаницу, и в некоторых случаях вызывает проблемы макета (layout), которые трудно выявить.

Цель этой статьи - убедить вас использовать запросы диапазонов (range queries), начиная с сегодняшнего дня.

2. Проблема медиа-запросов

В следующем демо представлено типичное меню навигации. На телефоне видны только логотип и переключатель (toggle) меню. На больших экранах видна навигация, а переключатель скрыт.

Взгляните.

Соответствующие медиа-запросы:

/* Скрываем навигацию на маленьких экранах */
.nav {
  @media (max-width: 300px) {
    display: none;
  }
}

/* Скрываем переключатель на больших экранах */
.toggle {
  @media (min-width: 300px) {
    display: none;
  }
}

Проблема возникает, когда обе контрольные точки (breakpoints) достигают одинакового значения (300px). Оба элемента будут скрыты одновременно.

max-width - эквивалент <=
min-width - эквивалент >=

Вот как это выглядит:

Когда очень сосредоточен на работе, легко это пропустить, а потом потратить 45 минут на отладку.

Я тратил, поэтому знаю, насколько это неприятно. Для решения проблемы нам нужны два разных значения контрольных точек:

• max-width: 299px - меньше или равно 299px

• min-width: 300px - больше или равно 300px

.nav {
  @media (max-width: 299px) {
    display: none;
  }
}

.toggle {
  @media (min-width: 300px) {
    display: none;
  }
}

Теперь при ширине области просмотра 300px, навигация будет видна, а переключатель скрыт:

Как далеко это может зайти? Для одного случая это нормально. Но при наличии множества контрольных точек ситуация быстро выходит из-под контроля.

3. Диапазоны медиа-запросов

Диапазоны медиа-запросов позволяют обойтись без явного определения отступа между контрольными точками. Мы можем использовать операторы сравнения для достижения такого же результата более читаемым способом:

/* Меньше или равно 300px */
.nav {
  @media (width <= 300px) {
    display: none;
  }
}

/* Больше 300px */
.toggle {
  @media (width > 300px) {
    display: none;
  }
}

Мы видим операторы сравнения и легко понимаем логику, а не гадаем о контрольных точках на основе синтаксиса min- и max-.

Диапазоны являются частью медиа-запросов 4 уровня.

4. Преимущества диапазонов

4.1. Читаемость

Их легче читать и понимать. При взгляде на CSS мы сразу понимаем его значение. Это облегчает отладку.

4.2. Хорошая поддержка

Диапазоны поддерживаются всеми основными браузерами с марта 2023 года:

4.3. Облегчение определения диапазонов

Легче писать CSS для дизайна между двумя контрольными точками:

/* До */
.section {
  @media (min-width: 300px)  and (max-width: 500px) {
    /* стили для карточки */
  }
}

/* После */
.section {
  @media (300px <= width <= 500px) {
    /* стили для карточки */
  }
}

Визуально это можно представить так:

5. Не только медиа-запросы

Синтаксис диапазонов также можно использовать в запросах к контейнеру (container queries). Пример использования диапазонов для шапки страницы (просто используем @container вместо @media):

h1 {
  @container (width >= 300px) {
    color: #fff;
    background-color: var(--brand-1);
  }

  @container (width >= 500px) {
    background-color: hsl(from var(--brand-1) calc(h + 100) s l);
  }
}

6. Дальнейшее чтение

• Медиа-запросы 4 уровня

• Неявные пробелы в медиа-запросах CSS

7. Узнать больше

Макетирование может быть непростой задачей, особенно если вы не владеете ключевой ментальной моделью макетов CSS. Вам больше не нужно об этом переживать. Я подготовил интерактивный курс по макетам CSS под названием “Маэстро макетов”.

Найти его можно здесь.

8. Заключение

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