Ручная адаптация мобильной версии сайта: медиа‑запросы и CSS

Статья предназначена для тех, кто знаком с основами CSS.

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

1. Добавление блока CSS
2. Создание медиа-запроса
3. Изменение свойств элементов

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

Возможности медиа-запросов выходят за рамки определения мобильных устройств – они позволяют создать адаптивный макет. Такой макет подстраивается под разрешение экрана и окна браузера, изменяя ширину, число колонок, размеры изображений и текста при необходимости. Медиа-запросы устанавливают ограничение по ширине макета, и при достижении этого порога (например, при уменьшении окна или на устройстве с определённым размером) применяется иной стиль.

1. Добавление блока CSS

Чтобы создать CSS-блок:

1. Запустите конструктор, позволяющий выбирать блоки.
2. Выберите раздел «Вставка».
3. Кликните на CSS-блок.

Результат — созданный блок.

2. Создание медиа-запроса

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

Каждый запрос начинается с правила @media, после чего идёт условие, в котором применяются типы носителей, логические операторы и медиа-запросы.

Для настройки стилей в зависимости от размеров экрана устройства необходимо добавить следующую конструкцию в созданный CSS-блок:

@media screen {
}

Когда требуется указать нужную ширину экрана, например, для альбомной ориентации iPhone 7 (768px), необходимо дополнить медиа-запрос:

(max-width) — определяет максимальную ширину экрана устройства

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

Если требуется изменить элемент для определённых размеров экрана, можно расширить текущий запрос:

(min-width) - определяет минимальную ширину экрана устройства

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

https://www.mydevice.io/ На этом сайте можно узнать размеры большинства устройств.
Вас заинтересует колонка CSS-width.

3. Изменение свойств элементов

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

В этом может помочь.

Способность изменять стили с помощью медиа-запросов логично вытекает из понимания и умения использовать селекторы.

В данном примере цвет заголовка меняется на красный при просмотре страницы с устройств с шириной экрана от 468px до 768px.

@media screen and (min-width: 468px) and (max-width: 768px) {
 .ваш-класс-загловка .f-header > p {
 color: red;
 }
}

Задаём класс заголовку и прописываем в CSS-блоке следующий код:

Результаты работы кода: