Статья была полезной?
Статья подходит тем, кто понимает основы CSS.
Чтобы изменять стили под определённые размеры экрана устройств, необходимо последовательно пройти шаги:
Использование медиа-запросов позволяет определить, что пользователь использует устройство с маленьким экраном (например, смартфон), и выдать ему специфический шаблон страницы.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета, и при достижении этого значения (к примеру, за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
1. Добавление блока CSS
Чтобы создать CSS-блок:
- Откройте конструктор с выбором блоков.
- Выберите раздел «Вставка».
- Кликните на 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-блоке следующий код:
Результаты работы кода:
