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

Когда вы слышите об отзывчивом веб-дизайне, что первое приходит вам на ум? Значит ли это, что сайт должен быть функциональным? Конечно, нет, это может звучать именно так для людей, только начавших свой путь в веб-разработке, но отзывчивость сайта не имеет ничего общего с его функциональностью.

Когда мы говорим об отзывчивости, мы имеем в виду то, насколько сайт масштабируется на различных устройствах. Сегодня люди используют различные виды устройств для просмотра контента в Интернете; это могут быть мобильные устройства, iPad, планшеты или даже часы. И очень важной задачей веб-разработчика является обеспечение правильного отображения веб-приложения независимо от того, с какого устройства оно просматривается.

Создание веб-сайта, не учитывающего различные устройства пользователей, является плохой практикой и приводит к негативному пользовательскому опыту. В свою очередь, пользователи могут никогда не вернуться на такой сайт, что в конечном итоге приведёт к ухудшению SEO для этого сайта.

Чтобы создать отзывчивый сайт, вам нужен инструмент. Медиа-запросы — это инструменты, используемые для переопределения определённых частей глобальных кодов CSS, что в конечном итоге приводит к отзывчивости сайта. Медиа-запросы позволяют разработчикам стилизовать CSS в зависимости от типа устройства или разрешения экрана.

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

Медиа-тип: относится к типу устройства, на котором будет отображаться сайт, включая print, screen, speech или all. По умолчанию тип медиа всегда имеет значение all, если не указано иное; это означает, что любые стили, используемые в медиа-запросах, будут применяться для печати, экрана или воспроизведения речи.

• Медиа-тип print относится к веб-сайтам, которые будут напечатаны в журналах или газетах.
• Медиа-тип speech относится к веб-сайтам, для которых требуются программы чтения с экрана для людей с ослабленным зрением.
• Медиа-тип screen предназначен для веб-сайтов, которые мы можем видеть на экранах наших устройств, таких как ноутбуки и мобильные телефоны. В этой статье я сосредоточусь на медиа-типе screen, наиболее актуальном для разработчиков и новичков.

Точка прерывания: Это относится к пиксельным значениям (например, 500px), определённым в CSS, чтобы сообщить разработчику, в какой момент стили должны быть включены в медиа-запрос, который мы применили.

Свойство: Это свойство сайта, которое можно изменить с помощью медиа-запросов. К таким свойствам относятся ширина, цвет, ориентация и т.д.

Значение: Обозначает то, для чего используется функция медиа-запроса.

Ниже приведён наиболее распространённый синтаксис медиа-запроса, используемый вами как разработчиком, чтобы сделать ваш сайт отзывчивым.

@media media-type and (feature:value){
  /*styles*/
}

@media screen and (min-width:1080px){
  h1 {
    background-color: yellow;
  }
}

Выбор точек прерывания при переходе от больших экранов к маленьким

Некоторые разработчики предпочитают создавать сайт desktop-first. Если вы создаёте сайт desktop-first, естественно, что вы захотите уменьшить его масштаб до размера самого маленького устройства — мобильного телефона.

Для больших размеров экрана лучше всего использовать max-width для медиа-функции и начинать от большего к меньшему (в порядке убывания размеров экрана).

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

У вас есть div с фоновым цветом красного цвета на экране настольного компьютера. Ваша цель — сделать цвет фона этого div зелёным на планшетной версии и жёлтым на мобильной. Если вы начнёте писать от меньшего размера экрана до самого большого, то единственное изменение цвета мы увидим на экране планшета, где цвет фона станет зелёным; изменения на маленьком экране не будут применены. Давайте посмотрим это на практике

<body>
  <div class="box-1"></div>
</body>

.box-1 {
  width:200px;
  height:200px;
  background-color: red;
}

/*MOBILE SCREEN */
@media screen and (max-width:369px){
  .box-1 {
    background-color: yellow;
  }
}

/*TABLET SCREEN*/
@media screen and (max-width:800px){
  .box-1 {
    background-color: green;
  }
}

max-width для экрана планшета выше означает, что стили будут применяться только к экранам размером от 800px и ниже, а max-width для мобильного устройства означает, что стили будут применяться только к экранам размером от 369px и ниже. Сейчас это является плохой практикой, поскольку мы начинаем desktop-first, но пишем наши медиа-запросы в порядке возрастания. В результате этого кода цвет фона для div будет меняться на экране планшета, но не будет меняться на экране мобильного устройства, как мы хотим.

На изображении выше показан размер экрана настольного компьютера с глобальным CSS, где div имеет красный цвет фона. На изображении ниже показан размер экрана в режиме планшета при 800px, и ниже цвет фона меняется на зелёный.

Но обратите внимание, что на 350px, где должны быть применены стили мобильного экрана, а цвет фона должен измениться на жёлтый, к сожалению, этот стиль не может быть добавлен.

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

Переупорядочив медиа-запросы и убедившись, что при разработке desktop-first нужно начинать писать медиа-запросы в порядке убывания, от большего к меньшему размеру экрана.

Основываясь на текущей статистике разрешений экранов от statcounter, это значительные точки прерывания, которые вы должны использовать в своём следующем проекте веб-разработки, если вы собираетесь развивать desktop-first;

• Большой экран (max-width: 1080px)
• Экран планшета (max-width: 768px)
• Мобильный экран (max-width: 360px)

Вы можете проверить свои медиа-запросы между двумя значениями, это означает, что вы будете устанавливать стили CSS только между двумя размерами экрана, как показано ниже;

• Большой экран: @media screen and (min-width:769px) and max-width(1080px).
• Экран планшета: @media screen and (min-width:481px) and (max-width:768px).
• Мобильный экран: @media screen and (min-width:360px) and (max-width:480px).

Но с введением спецификации Level CSS media query, медиа-запросы, написанные выше, могут быть записаны в более краткой и полной форме, используя ключевое слово "width", отбросив "max" и "min", как показано ниже:

/* без диапазонов*/
@media screen and (width <= 1080px){
/* код */
}
@media screen and (width <= 768px){
/* код */
}
@media screen and (width <= 360px){
/* код */
}

Приведённый выше формат упрощает использование max-width, поскольку он просто означает, что стили в этих медиа-запросах будут работать для размеров экрана, меньших или равных любому из указанных выше значений (1080px, 768px или 360px). Стили в приведённых выше медиа-запросах не будут работать для размеров экрана, превышающих указанные выше значения.

/* В диапазоне */
@media screen and (width >= 769px) and (width <= 1080px){
/* код */
}

Приведённый выше медиа-запрос будет работать для размеров экрана больше или равно 769px и меньше или равно 1080px, что совпадает с предыдущим подходом min-max.

Более того, приведённый выше код может быть модифицирован таким образом:

@media screen and ( 769px <= width <= 1080px){
/* код */
}

Выбор точек прерывания от маленького до большого экрана

Предыдущий раздел был посвящён разработчикам, предпочитающим использовать подход, ориентированный на desktop-first. В этом разделе речь пойдёт о разработчиках, предпочитающих использовать подход mobile-first и в конечном итоге масштабируют свои сайты, чтобы они идеально помещались на экране настольного компьютера.

При написании медиа-запросов для подхода mobile-first следует помнить, что вы движетесь по лестнице, а значит, ваши медиа-запросы будут расположены в порядке возрастания, то есть вы будете масштабироваться от меньших размеров экрана к большим. Вместо того чтобы использовать max-width, вы будете использовать min-width. min-width в данном случае означает, что стили будут влиять на размеры экрана только при min-width и выше.

Исходя из текущей статистики разрешений экранов от statcounter, это значительные точки прерывания, которые вы должны использовать в своём следующем проекте веб-разработки, если вы планируете развивать mobile-first;

• Экран мини-планшета (min-width: 480px)
• Экран планшета (min-width: 800px)
• Экран настольного компьютера (min-width: 1080px)

Как говорилось выше в этой статье, используя спецификации CSS уровня 4 для написания медиа-запросов, точки прерывания могут быть написаны таким образом:

@media screen and (width >= 480px){
/* код */
}
@media screen and (width >= 800px){
/* код */
}
@media screen and (width >= 1080px){
/* код */
}

Преимущество написания медиа-запросов типа Range

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

В конечном итоге вы могли бы остановиться на написании медиа-запросов по своему усмотрению, но написание медиа-запросов в диапазоне даёт нам ключевое преимущество.

Заметили, что вам нужно помнить о порядке, в котором вы записываете точки прерывания медиа-запросов?

• При разработке для desktop-first необходимо писать медиа-запросы в порядке убывания
• При разработке для mobile-first медиа-запросы следует писать в порядке возрастания.

Даже если вы успешно расположили медиа-запросы в правильном порядке, в итоге у вас получаются стили, не предназначенные для конкретных размеров экрана. Например, вам может понадобиться другая функция для сайта на экранах размером от 468px до 768px. Вы ни в коем случае не хотите, чтобы эта функция была унаследована экранами гораздо меньшего размера, скажем, 360px и ниже. В подобной ситуации, если вы создаёте сайт для desktop-first, обязательно будут унаследованы стили в разных точках разрыва.

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

Поэтому метод написания медиа-запросов по диапазону в сочетании с новой спецификацией медиа-запросов уровня 4 является более удобным и всеобъемлющим способом написания медиа-запросов для вашего проекта, как написано ниже:

@media screen and (360px <= width <= 480px){
/* код */
}
@media screen and (480 < width <=768px){
/* код */
}
@media screen and ( 768px <  width <= 1080px){
/* код */
}

Обстоятельное введение в новую спецификацию CSS Level 4 media query можно найти в документации MDN.

Альтернативы медиа-запросам

Это не означает, что разработчики никогда не должны использовать медиа-запросы, но лучшая практика требует, чтобы вы использовали как можно меньше медиа-запросов в своём проекте.

С тех пор как в CSS появился flexbox, можно сделать макеты отзывчивыми без написания медиа-запросов, используя:

.container{
    flex-wrap: wrap;
}

Это свойство flexbox автоматически делает ваши макеты отзывчивыми, когда размер экрана перестаёт устраивать.

С появлением таких CSS-фреймворков, как Tailwind, написание многих медиа-запросов сократилось. Все полезные классы Tailwind могут применяться условно в различных точках прерывания, что упрощает создание сложных отзывчивых интерфейсов.

Более того, использование относительных единиц CSS, таких, как em, rem и %, а не абсолютных, таких как пиксели (px), также позволяет легко сделать ваш сайт отзывчивым, сократив при этом количество стилей, изменяемых в медиа-запросах.

Заключение

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