Медиа запросы в css для адаптации веб страницы под устройства с разной шириной экрана

Принципы и синтаксис написания медиа запросов в css файле при адаптации страницы простыми словами на понятных примерах.

14/03/2024

CSS, HTML

Медиа запросы по своей сути являются css выражениями, которые применяются в файлах стилей. Используются при адаптации верстки под устройства с разной шириной экрана. Это позволяет создавать веб страницы, которые одинаково хорошо будут отображаться как на компьютерах, так и на мобильных.

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

Синтаксис

Создается медиа запрос с помощью ключевого слова @media. После ключевого слова должно идти условие, при котором будет выполнятся код. Сам css код находится между скобок медиа запроса.

@media (max-width: 800px) {

  /* css код */

}

В данном примере в качестве условия применено выражение (max-width: 800px). Это означает, что код, который находится внутри данного медиа запроса будет применятся к устройствам с шириной экрана менее 800px.

Условия медиа запросов

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

width: задает ширину экрана, при которой применяются стили. Например, указав (width: 1000px) стили будут применятся к устройствам с экраном шириной 1000px.
min-width: минимальная ширина экрана, при которой применяются стили. Указав (min-width: 1000px) стили будут применены ко всем устройствам с шириной экрана не меньше 1000px.
max-width: максимальная ширина экрана, при которой применяются стили. Указав (max-width: 1000px) стили применятся будут к устройствам с шириной экрана больше 1000px.
height: задает высоту экрана, при которой применяются стили.
min-height: минимальная высота экрана, при которой применяются стили.
max-height: максимальная высота экрана, при которой применяются стили.
screen: стили будут применятся только для отображения на экране.
print: для печати документа в режиме предварительного просмотра.
all: для все типов устройств.
orientation: ориентация экрана. Принимает два значения: landscape — горизонтальная и portrait — вертикальная.
aspect-ratio: соотношение сторон экрана. Например, aspect-ratio: 4/3.
min-aspect-ratio: минимальное соотношение сторон экрана.
max-aspect-ratio: максимальное соотношение сторон экрана.

Другие условия для медиа запросов

Так же существует возможности для более тонкой настройки. Они не отличаются популярностью использования, но так как они существуют упомянуть о них можно.

resolution: разрешение экрана.
min-resolution: минимальное разрешение экрана.
max-resolution: максимальное разрешение экрана.
scan: тип развертки дисплея (progressive или interlace).
grid: указывает, отображается ли документ в сетке или нет.
color: количество битов на цвет.
color-index: количество цветов в цветовой таблице устройства.
color-gamut: цветовое пространство, поддерживаемое устройством.

@media (max-width: 800px) {

  .text_bloc p{

    font-size: 20px;

    color: #ff0000;

  }

}

В данном примере текст, находящийся в теге p, внутри html элемента с классом .text_bloc должен отображаться с заданными в коде размером и цветом при условии, если ширина экрана менее 800px.

Операторы условий

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

Оператор and

Логический оператор and указывается при необходимости учитывать два и более условий медиа запроса. Код внутри медиа запроса будет исполнятся в том случае, если все условия будут выполнятся (возвращать true).

@media screen and (max-width: 800px) {

  /* css код */

}

Медиа запрос будет срабатывать в случае, если веб страница открыта на экране и на экранах шириной меньше 800px.

Допустим, необходимо применять стили для веб страницы, которая отображена на экранах планшетов шириной в диапазоне от 480px до 768px. Этого можно достигнуть с помощью выражения:

@media screen and (max-width: 768px) and (min-width: 480px) {

  /* css код */

}

Запятая между условиями

Если оператор and можно интерпретировать как “И”, то запятая между условиями будет выполнять функцию “ИЛИ”. Медиа запрос сработает, если параметры устройства будут соответствовать одному из нескольких условий.

@media (min-width: 800px), (orientation: landscape) {

  /* css код */

}

Логический оператор not

Оператор not означает отрицание. Размещается перед условием. Css код внутри медиа запросов будет выполнятся во всех случаях, кроме тех когда устройство соответствуют указанным в медиа запросе.

@media not (orientation: landscape) {

  /* css код */

}

Условия, которые отрицаются посредством оператора not можно перечислять с помощью and. В таком случае код не будет исполнятся при совпадении всех условий с текущими параметрами отображения страницы.

@media not (orientation: landscape) and (max-width: 800px) {

  /* css код */

}

Если вместе с not применять запятую, то not будет относится только к тем правилам, которые перечислены до запятой.

@media not (orientation: landscape) and (max-width: 800px), (min-width: 1200px) {

  /* css код */

}

Где писать медиа запросы

Медиа запросы пишутся в файле со стилями css или выносятся в отдельный css файл. Тут каждый сам для себя решает какой способ для него удобнее.

Главное помнить о приоритетности стилей, которые находятся ниже. Это правило справедливо и для медиа запросов.

Лично я отдаю предпочтение созданию отдельного файла, который отвечает за адаптивность страницы. Такой подход позволяет сделать структуру проекта более понятной и избежать дублирование запросов.

<link rel="stylesheet" href="./css/style.css">

<link rel="stylesheet" href="./css/responsive.css">

При подключении файлов в html стоит так же учитывать очередность подключения. Файл, отвечающий за адаптивность должен подключаться после основных файлов стилей.

Подключение файла стилей в html с помощью медиа запросов

Помимо того, что посредством запросов можно подключать участки кода предусмотрена возможность подключить файл css в html код страницы.

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

Создать для файла такой запрос непосредственно в html можно помощью атрибута media="" для тега link. Тег link располагается между тегами head, как и в случае с подключением любого другого файла css.

<link rel="stylesheet" media="screen and (max-width: 500px)" href="./css/mobile_styles.css">

Пример использования медиа запросов для адаптации под мобильные устройства

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

Отображение страницы на разных устройствах

Помимо расположения элементов относительно друг относительно друга для мобильных устройств необходимо уменьшить элементы и отступы друг от друга.

Например, если для отображения на компьютере оптимальный размер шрифта для основного текста будет в пределах 18px. Для мобильного устройства этот размер будет оптимальным в пределах 14px. Для демонстрации возьмем верстку блока с фото выше. Его html код:

<div class="bloc">
			<div class="image">
				<img src="./image/image-page.jpg" alt="Девушка">
			</div>
			<div class="text_bloc">
				<h2 class="title-bloc">Заголовок текста</h2>
				<p>
					Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Но продолжил наш пор злых ты всемогущая, подпоясал рекламных диких это, языкового грамматики по всей заголовок алфавит мир. Всемогущая осталось журчит диких, о там которой города.
				</p>
				<p>
					Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Но продолжил наш пор злых ты всемогущая, подпоясал рекламных диких это, языкового грамматики по всей заголовок алфавит мир. Всемогущая осталось журчит диких, о там которой города.
				</p>
			</div>
		</div>

В данный html код подключен файл со стилями:

.bloc{

  display: flex;

  justify-content: space-between;

}

.image{

  max-width: 423px;

  max-height: 334px;

  border-radius: 15px;

  overflow: hidden;

  margin: 0 35px 0 0;

}

.text_bloc{

  max-width: 505px;

}

.title-bloc{

  font-size: 36px;

  font-weight: 600;

  color: #454444;

}

.text_bloc p{

  font-size: 20px;

  font-weight: 500;

  color: #505050;

}

И все бы хорошо, только вот при ширине экрана 800px верстка перестает умещаться и ломается. Возникает необходимость на устройствах с шириной экрана 800px и менее текстовый блок отображать под изображением.

В данном примере ширина экрана будет являться точкой слома. То есть точкой, в которой будет меняться раскладка сайта и параметры самих элементов.

Для ниже основных стилей укажем стили в медиа запросе:

@media (max-width: 800px) {

  .bloc {

    flex-direction: column;

  }

  .image {

    margin: 0 0 20px 0;

  }

}

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

Таким образом в процессе адаптации необходимо добавлять в точках слома медиа запрос, в котором будут добавлены стили элементам с измененными значениями.

Для отображения на мобильных необходимо уменьшить размеры шрифта для текста и заголовка. Таким образом у нас появляется вторая точка слома на 400px. Как определить точки слома расскажу ниже.

@media (max-width: 400px) {

  .title-bloc{

    font-size: 22px;

  }

  .text_bloc p{

    font-size: 14px;

  }

}

В следствии применения медиа запросов в точках слома верстку сайта получилось адаптировать под мобильные.

Пример отображения адаптивной верстки на экранах разной ширины

Конечно, это не идеальная верстка. Но это всего лишь пример, для демонстрации принципа применения запросов.

Определение точек слома

На этапе создания дизайн макета дизайнер в части случаев создает макеты под разные размеры. Как минимум создается мобильная версия. Но даже на макете невозможно определить точки слома. Единственным способом остается определение их опытным путем.

Есть несколько стратегий адаптации верстки. Основные — это Mobile-First Design и Progressive Enhancement.

Mobile-First Design предусматривает создание мобильной версии и адаптации ее под ПК.
Progressive Enhancement предполагает создание ПК версии и ее адаптации под мобильные устройства.

Для определения точек слома необходимо запустить сайт на компьютере (локальном сервере). В браузере открыть панель разработчика. Для того, чтоб открыть панель разработчика необходимо кликнуть правой кнопкой мышки в любое место браузерного окна и выбрать “Посмотреть код”.

В разных браузерах имя пункта меню для открытия панели разработчика может отличатся, но интерпретация везде будет однозначная. Для браузера Chrome — это “Посмотреть код”.

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

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

Для удобства работы в верхней части экрана есть возможность изменить масштаб отображения веб страницы.

Много медиа запросов — это плохо

Медиа запросы в верстке позволяют создавать адаптивные под различные устройства веб страницы. А адаптивность должна присутствовать обязательно иначе ресурс не будет соответствовать современным стандартам. Но использование большого количества может навредить веб ресурсу.

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

Соответственно, количество кода для адаптации страницы кратно вырастет. Применение большого количества @media ведет к:

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

Можно резюмировать, что применение @media необходимо сводить к минимуму. Для этого следует использовать динамические единицы (%, vw и т.п.) вместо статических (px). Это снизит необходимость изменять параметры элементов.

Так же можно применять такие функции как clamp(). О том как пользоваться данной функцией я рассказал здесь. Конечно, полностью исключить медиа запросы не получится, но кратно сократить их использование можно и следует к этому стремится.