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

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

В постах канала показываем, как цифры превращаются в решения: где реально идёт выручка, а где утечки. «Один график в боте экономит часы споров». Больше коротких приёмов и кейсов внутри.
Актульные темы с записей эфиров
13.03.25 - 98 минут
Регулярный менеджмент помогает командам ставить рекорды по метрикам.
Как из ленивой команды, которая перекладывает с полки на полку задачи, сделать спортивную, которая бьет рекорды из квартала в квартал.
Разбираем основные метрики отчета Monitor Analytics для руководителей и собственников.
смотрите >>
Практикум - 6 часов
Продажи без слива.
Потенциал в базе.
Узнаете, где спрятана прибыль в вашем проекте. Чёткие инсайты на основе цифр.
У вас достаточно данных. Чтобы найти как расти. За счёт правильной работы с базой пользователей и корректной аналитики — школы зарабатывают в разы больше. В разы — это 80% всего дохода с базы при крутом холодном трафике.
смотрите >>
120 минут
Как выиграть конкуренцию за внимание в email-рассылках и повысить доход?
Открываемость писем падает? Подписчики не читают ваши сообщения? Конверсии низкие, а расходы на email-маркетинг растут?
Eзнайте как повысить эффективность ваших email-кампаний, снизить затраты и увеличить продажи!
смотрите >>
130 минут
2025: что изменилось в продажах за 5 лет.
Стоимость трафика выросла в 3-5 раз. Конкуренция на рынке онлайн-школ увеличилась. Пользователи стали избирательнее и требовательнее.
Сегодняшние лидеры рынка используют новые стратегии, основанные на системной работе с базой. Именно про эти стратегии поговорили на вебе.
смотрите >>
90 минут
Не тот путь: опасные методики и токсичные тренды.
Как избежать тупиковых решений в маркетинге онлайн-школ и вовремя отслеживать негативные процессы.
Расскажу про новые опасности из разборов. 70% разборов 2024 года можно красить в красный цвет: выбран не тот путь развития и уже очень давно. Огромные обороты, а перестраиваться уже очень больно.
смотрите >>
Аналитика рассылок GetCourse
Подключите модуль «Рассылки» в Monitor Analytics и перестаньте работать вслепую: вся статистика писем, сегменты, конверсии и отписки собраны в одном отчёте. Сравнивайте кампании, находите точки роста и повышайте продажи за счёт грамотной работы с базой.
авторизуйтесь