Урок Адаптивность. Медиазапросы – Курс Основы фронтенд разработки

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

Что такое адаптивность?

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

Другим подходом является использование адаптивности.

Адаптивность в веб‑интерфейсах (англ. responsive web design) — подход к разработке сайтов, при котором интерфейс автоматически подстраивается под размеры экрана и разрешение устройства пользователя. Цель — обеспечить удобное взаимодействие с контентом на любом гаджете: смартфоне, планшете, ноутбуке, телевизоре с доступом в интернет и т. д.

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

Например на сайте может быть использован следующий подход для меню:

На десктопе: меню развёрнуто в строку, контент — в 3 колонки, видны все виджеты.
На планшете: меню остаётся, контент переходит в 2 колонки, второстепенные блоки уменьшаются.
На смартфоне: меню сворачивается в «бургер»-иконку, блоки выстраиваются вертикально, некоторые элементы скрываются в выпадающие списки.

Как сделать страницу адаптивной?

Базовая настройка

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
html

Этот метатег устанавливает ширину страницы равной ширине устройства и задаёт начальный масштаб.

Медиа запросы

В CSS у нас есть возможность использовать

Важно помнить, что адаптивность — это не просто «уменьшить всё». Когда мы говорим об адаптивности подразумевается изменение структуры, размеров, отступов и поведения элементов.