Как располагаются точки останова по увеличению или уменьшению значений в медиа-запросах?

Что проверяют

Понимаете ли вы, что порядок медиа-запросов определяет каскад, а не вкус автора. Правило простое: при min-width точки идут по возрастанию, при max-width по убыванию. Следом часто спрашивают, почему именно так и что будет, если порядок перепутать.

Как отвечать

Медиа-запрос не повышает специфичность. Если на экране совпадают несколько условий, побеждает правило, объявленное ниже. Отсюда два подхода:

• mobile first: базовые стили для узкого экрана без медиа-запроса, дальше @media (min-width: 640px), (min-width: 1024px), (min-width: 1280px) по возрастанию. На широком экране совпадают все условия, и последним срабатывает самое крупное;
• desktop first: базовые стили для широкого экрана, дальше max-width по убыванию: 1279px, 1023px, 639px. На узком экране совпадают все, и последним применяется самое узкое;
• синтаксис диапазонов: современные браузеры поддерживают запись @media (width >= 768px) и (400px <= width < 768px). Она снимает проблему пограничного пикселя, о которой ниже.

Точки лучше выбирать по контенту, там, где начинает ломаться макет, а не по размерам конкретных устройств. Mobile first обычно предпочтительнее: узкий экран получает минимум переопределений, а сложность добавляется по мере роста ширины. Для компонентов, которым важна ширина контейнера, а не окна, сейчас используют @container.

Где спотыкаются

Пишут min-width в порядке убывания. Тогда правило для 640px стоит ниже правила для 1024px и перебивает его на любом широком экране, а десктопные стили не применяются никогда.

Стыкуют границы max-width: 768px и min-width: 768px. На ширине ровно 768px срабатывают оба блока. Спасает диапазонный синтаксис или граница 767.98px.

Смешивают оба подхода в одном файле без системы, и никто не может сказать, какое правило активно на планшете. Договоритесь об одном направлении и держите точки в переменных препроцессора или в конфиге Tailwind.