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

Статья подходит тем, кто понимает основы 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-блоке следующий код:

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