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

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

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

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

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

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

Для того чтобы создать CSS блок, вам потребуется:

• Открыть конструктор с выбором блоков (1)
• Выбрать пункт «Вставка» (2)
• Кликнуть на CSS блок (3)

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

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

Все запросы начинаются с правила @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.

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

Подробную информацию по этой теме можно найти в статье "Оформление стилей элемента с кастомным классом".

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

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

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