Понимание 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
будет меняться на экране планшета, но не будет меняться на экране мобильного устройства, как мы хотим.
![Размер экрана больше 800px](images/image01.jpg)
На изображении выше показан размер экрана настольного компьютера с глобальным CSS, где div
имеет красный цвет фона. На изображении ниже показан размер экрана в режиме планшета при 800px
, и ниже цвет фона меняется на зелёный.
![Размер экрана меньше 800px](images/image02.jpg)
Но обратите внимание, что на 350px
, где должны быть применены стили мобильного экрана, а цвет фона должен измениться на жёлтый, к сожалению, этот стиль не может быть добавлен.
![Размер экрана 350px](images/image03.jpg)
Поскольку мы расположили медиа-запросы в порядке возрастания, приоритет имеют стили медиа-запроса с наибольшей шириной экрана.
Переупорядочив медиа-запросы и убедившись, что при разработке 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
), также позволяет легко сделать ваш сайт отзывчивым, сократив при этом количество стилей, изменяемых в медиа-запросах.
Заключение
Создание полностью отзывчивого веб-сайта не происходит в одно мгновение. Чтобы создавать отзывчивые веб-сайты как профессионал, требуется время и терпение. Возможно, у вас не получится с первой попытки, но при постоянной практике и применении описанных выше методов вы сможете создавать отзывчивые сайты в кратчайшие сроки.