750 подписчиков

Медиа-функции: фундамент адаптивной и мобильной вёрстки

26 января26 янв

5 мин

Современный веб давно перестал быть «настольным». Сегодня сайты открываются на смартфонах, планшетах, ноутбуках, телевизорах и даже автомобилях. Чтобы интерфейс выглядел и работал корректно на любом устройстве, фронтенд-разработчик должен уверенно владеть медиа-запросами и медиa-функциями. В этой статье разберёмся, что такое медиа-функции, какие значения они принимают, чем отличаются width и device-width, как работает @media, зачем нужен viewport, и почему em — один из самых универсальных инструментов адаптивной вёрстки. Медиа-функции — это параметры, которые используются внутри медиазапросов и позволяют применять CSS-правила в зависимости от характеристик устройства или области просмотра браузера. На практике чаще всего они используются для: Мобильное устройство отличается от настольного компьютера прежде всего разрешением экрана и размером области просмотра. Именно эти характеристики мы и используем для определения типа устройства. Описывает ширину области просмотра браузера (viewpor

Оглавление

Что такое медиа-функции
Доступные значения медиа-функций
Почему размер экрана — ключевой параметр

В этой статье разберёмся, что такое медиа-функции, какие значения они принимают, чем отличаются width и device-width, как работает @media, зачем нужен viewport, и почему em — один из самых универсальных инструментов адаптивной вёрстки.

Что такое медиа-функции

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

На практике чаще всего они используются для:

Адаптации интерфейса под разные экраны;
Изменения типографики;
Перестройки сеток;
Улучшения UX на мобильных устройствах.

Доступные значения медиа-функций

Почему размер экрана — ключевой параметр

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

Основные параметры:

width

Описывает ширину области просмотра браузера (viewport).
Это фактическая ширина страницы в CSS-пикселях.

height

Описывает высоту области просмотра браузера.

device-width

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

device-height

Определяет полную высоту экрана устройства.

Разница между width и device-width

Это один из самых важных моментов, который часто путают начинающие разработчики.

device-width и device-height — это физические размеры экрана устройства;
width и height — это размеры области просмотра браузера.

Пример

Представим монитор с разрешением 1920×1080.
Мы можем открыть браузер в окне 800×600.

В этом случае:

device-width = 1920px
device-height = 1080px
width = 800px
height = 600px

👉 Именно поэтому в современной адаптивной вёрстке рекомендуется использовать width и height, а параметры device-* считаются устаревшими и почти не применяются на практике.

Объявление медиазапросов

Через атрибут media у <link>

Ранее медиазапросы часто подключали так:

Способ рабочий, но менее гибкий.

CSS-функция @media

Сегодня основной и самый удобный способ — использование CSS-функции @media.

Пример базового медиа-запроса

Здесь:

screen — медиатип (экраны);
Внутри описываются стили, которые применяются при выполнении условия.

Диапазоны значений: min- и max-

Для задания диапазонов используются приставки:

min-width;
max-width;
min-height;
max-height.

Пример

Такой медиа-запрос срабатывает на всех устройствах с шириной области просмотра до 480px.

Viewport — основа корректной адаптивности

Без правильно настроенного viewport медиазапросы на мобильных устройствах могут работать некорректно.

Что такое viewport

Viewport — это область просмотра страницы в браузере.
На мобильных устройствах она может отличаться от реального размера экрана, если её явно не настроить.

Настройка области просмотра

Для этого используется специальный meta-тег:

Но сам по себе он ничего не делает — важны параметры.

Тонкая настройка viewport

Ширина и высота

width — ширина области просмотра.
Допустимые значения:
200px–10000px или device-width;
height — высота области просмотра.
Допустимые значения:
223px–10000px или device-height.

⚠️ Важно: на практике почти никогда не требуется задавать height.

Масштабирование страницы

initial-scale

Определяет начальный масштаб страницы:

Допустимые значения: от 0.1 до 10

Пользовательский контроль масштабирования

minimum-scale и maximum-scale

Позволяют ограничить масштабирование:

user-scalable

Разрешает или запрещает масштабирование:

Допустимые значения:

yes;
no.

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

Единица измерения em

Помимо процентов (%), в адаптивной вёрстке активно используется единица em.

Что такое em

em — это относительная единица измерения, зависящая от размера шрифта элемента.

em для font-size

Для элемента:

1em = текущий font-size этого элемента.

Именно поэтому em идеально подходит, когда:

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

Шрифты на мобильных устройствах

Пример адаптации типографики:

Здесь:

Текст уменьшается до 14px;
Заголовок остаётся визуально акцентным.

em для размеров элементов

em удобно использовать не только для шрифтов, но и для:

width;
height;
padding;
margin;
background-size.

Это делает компоненты более гибкими и универсальными.

Ширина и высота в em

Чтобы перевести px в em, используется простая формула:

em = px ÷ font-size

Пример

Для элемента с font-size: 14px:

Wem = 14px ÷ 14px = 1em

То же самое применяется и для height.

Взаимодействие с тач-устройствами

Мобильные устройства имеют важные особенности:

Отсутствует hover-эффект;
Основные действия — тап, свайп, зум;
Высокая плотность интерфейса снижает удобство.

Кратко: что важно запомнить