Медиа—запросы (media queries) — это необходимый набор правил css стилей для определения поведения внешнего вида сайта при изменении размера ширины экрана.
Так звучит определение медиа-запросов, но давайте поговорим о них простым языком.
Современные сайты обязательно должен отлично смотреться как на компьютере, так и на планшете, а особенно на мобильном устройстве. Это связано с тем что большая часть пользователей интернета заходят с мобильных устройств.
На начало 2023 года 5,44 миллиарда человек пользуются мобильными телефонами, что составляет 68% от общей численности населения мира. Количество уникальных пользователей мобильных телефонов за последний год увеличилось чуть более чем на 3% — на 168 миллионов новых пользователей.
Источник web-canape.ru
Так как сделать так, что бы сайт действительно хорошо смотрелся на всех устройства? Тут нам и приходят в помощь медиа-запросы.
Как писать медиа-запросы
Начнем с того что когда дизайнер делает макет в Figma, он всегда старается продумать поведение сайта при адаптиве. По этому когда мы получаем макет, мы видим какие «точки слома» или «точки остановы», так называемые брейкпойнты (breakpoint) присутствуют.
Основываясь на макет, мы понимаем какие основные брейкпойнты (breakpoint) мы должны использовать при написании адаптива.
К сожалению дизайнер, делая макет, не всегда продумывает адаптив, тогда его приходится писать самому при вёрстке макета.
Из нашего опыта
Общепринятый вид написания медиа-запросов выглядит так:
@media [тип устройства] [характеристика устройства] {
/* CSS-правила */
}Всего есть четыре основные типа устройств:
- all — условие медиа-запроса применится ко всем устройствам. Если не задать никакой тип в выражении, то по умолчанию применяется этот.
- print — стили внутри такого медиа-запроса применятся при печати на принтерах или экспорте в PDF, в том числе в режиме предпросмотра документа.
- screen — для устройств с экранами.
- speech — для синтезаторов речи, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
В написании медиа-запросов может присутствовать сразу несколько условий через запятую. В этом случае css стили будут применять к каждому из условий.
@media (orientation: landscape), (max-width: 960px) {
.text {
color: red;
}
}В этом запросе стили применятся для устройств orientation: landscape — это альбомная ориентация и экраны с максимальной шириной до 960рх.
Так же можно задавать диапазон ширины экрана в котором будут применятся правила:
@media (min-width: 320px) and (max-width: 640px) {
.link {
text-decoration: underline;
}
}Совет
Для вёрстки mobile first (первым собирается экран для мобильного устройства) лучше использовать медиа-запрос с min-width и располагать их в порядке увеличения ширины экрана.
В свою очередь для вёрстки сначала десктопа (desktop first), использовать max-width, и писать запросы в обратном порядке.
