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

В сфере искусственного интеллекта произошло заметное событие. aio350 3 минуты назад Диапазоны медиа-запросов CSS Простой 3 мин 0 CSS * Веб-разработка * Кейс Перевод Автор оригинала: Ahmad Shadeed 1. ВведениеМедиа-запросы (media queries) - это основа отзывчивого дизайна. Мы используем их для определения того, как должен меняться дизайн на основе размеров области просмотра (viewport).

Но синтаксис min-width и max-width может вызывать путаницу, и в некоторых случаях вызывает проблемы макета (layout), которые трудно выявить. Цель этой статьи - убедить вас использовать запросы диапазонов (range queries), начиная с сегодняшнего дня. Проблема медиа-запросовВ следующем демо представлено типичное меню навигации.

Технические детали

На телефоне видны только логотип и переключатель (toggle) меню. На больших экранах видна навигация, а переключатель скрыт. Соответствующие медиа-запросы:/* Скрываем навигацию на маленьких экранах */ { /* Скрываем переключатель на больших экранах */ { Проблема возникает, когда обе контрольные точки (breakpoints) достигают одинакового значения (300px).

Оба элемента будут скрыты одновременно. max-width - эквивалент <= min-width - эквивалент >= Вот как это выглядит:Когда очень сосредоточен на работе, легко это пропустить, а потом потратить 45 минут на отладку. Я тратил, поэтому знаю, насколько это неприятно.

Для решения проблемы нам нужны два разных значения контрольных точек:max-width: 299px - меньше или равно 299pxmin-width: 300px - больше или равно 300px. nav { { Теперь при ширине области просмотра 300px, навигация будет видна, а переключатель скрыт:Как далеко это может зайти? Для одного случая это нормально.

Отраслевые последствия

Но при наличии множества контрольных точек ситуация быстро выходит из-под контроля. Диапазоны медиа-запросовДиапазоны медиа-запросов позволяют обойтись без явного определения отступа между контрольными точками. Мы можем использовать операторы сравнения для достижения такого же результата более читаемым способом:/* Меньше или равно 300px */ { /* Больше 300px */ { Мы видим операторы сравнения и легко понимаем логику, а не гадаем о контрольных точках на основе синтаксиса min- и max-.

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

При взгляде на CSS мы сразу понимаем его значение. Это облегчает отладку. Хорошая поддержкаДиапазоны поддерживаются всеми основными браузерами с марта 2023 года:4.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.