Медиазапросы css для мобильных
Медиа запросы в CSS — это основной инструмент и основные правила адаптивного дизайна, способ заставить сайт выглядеть одинаково хорошо на любом устройстве. Смартфоны, планшеты и десктопы имеют разную ширину экрана и ориентацию. Медиа позволяют применять разные стили в зависимости от параметров: размер экрана, ориентация (portrait или landscape), плотность пикселей. На мобильных устройствах размер шрифта меньше, элементы скрываются через display: none, контент переносится в одну колонку. На больших экранах используется display: flex или grid для раскладки в несколько колонок. Основной инструмент — параметры max-width и min-width в медиа условиях браузера. Один CSS код, правильно структурированный, работает на всех типах устройств вместо отдельных версий. В этой статье разберемся со словами синтаксиса медиазапросы css для мобильных, основами их применения и новыми подходами при создании адаптивного дизайна, что позволит делать работу лучше.
Синтаксис @media запросов: разбираем по частям
@media запрос в CSS состоит из трёх элементов. Ключевое слово @media, условие в скобках и блок со стилями. Каждый элемент отвечает за свою функцию, и когда вы поймёте эту структуру, медиазапросы перестанут выглядеть сложно.
Возьмём простой пример:
css @media (max-width: 768px) { .container { width: 100%; padding: 15px; } }
@media — это команда браузеру: «Дальше идёт условие, проверь его». Без этого слова браузер не поймёт, что это медиазапрос.
(max-width: 768px) — условие. Если ширина экрана 768 пикселей или меньше, то применяй правила ниже. max-width проверяет максимальную ширину окна браузера.
Блок CSS внутри фигурных скобок — это стили, которые сработают, когда условие истинно. Здесь width становится 100%, padding 15px.
Противоположный вариант — min-width. Он проверяет минимальную ширину:
css @media (min-width: 768px) { .container { display: flex; width: 80%; } }
min-width: 768px означает: если ширина экрана 768 пикселей или больше, применяй эти стили. На планшетах и десктопах контейнер будет flex и займёт 80% ширины.
Синтаксис медиазапросов часто включает screen. @media screen and (max-width: 768px) работает только для экранов, а не для печати. Логический оператор and объединяет несколько условий:
css @media screen and (max-width: 768px) { .sidebar { display: none; } }
На мобильны и планшеты устройства с экранов сайдбар скроется (display none), потому что места на ширине экрана мало.
Синтаксис позволяет проверить orientation — ориентацию устройства. portrait означает вертикальное положение (высота больше ширины), landscape — горизонтальное (ширина больше высоты):
css @media (orientation: portrait) { .image { width: 100%; } }
@media (orientation: landscape) { .image { width: 60%; } }
Один мобильного устройства в портретном режиме выглядит по-одному, в альбомном режиме — по-другому. Адаптивный дизайн должен учитывать оба варианта.
Breakpoints: выбираем стандартные ширины
Breakpoints — это значения, на которых вы меняете стили. Стандартные breakpoints для адаптивной верстки:
480px — типичная ширина мобильного телефона. На этом экрана контент в одну колонку, шрифты маленькие, навигация упрощена.
768px — типичная ширина планшета. Здесь можно использовать две колонки, отступы больше.
1200px — ширина десктопного дисплея. Полная раскладка, несколько колонок, максимум информации на экрана.
Почему именно эти числа? Это не придумали волшебники. Просто 480 пикселей — примерно ширина iPhone, 768 — примерно iPad, 1200 — примерно ноутбук. Разработчики выбрали breakpoints на основе реальных устройств, которыми пользуются люди.
Вы можете создать свои breakpoints. Если ваша целевая аудитория использует только планшеты, создавайте по их размерам. Но для начала используйте стандартные — они проверены временем.
Когда вы добавляете новый breakpoint, спрашивайте: при какой ширине экрана мой дизайн начинает ломаться? Вот там и нужен новый медиазапрос условий.
Mobile First: пишем для мобильных, потом расширяем
Mobile First — это методология создания адаптивного дизайна. Сначала вы пишете базовые стили для мобильных устройств. Потом через min-width добавляете стили для планшетов и десктопов.
Почему это работает лучше? Потому что мобильные устройства имеют ограниченную ширину экрана. Для них нужен упрощённый дизайн — одна колонка, маленькие отступы, минимум элементов. Это базовая версия. На больших экранах браузер загружает дополнительные стили через медиа запрос и применяет их.
Вот как это выглядит:
css / Базовый стиль для всех, включая мобильные / body { font-size: 14px; padding: 10px; }
.content { display: block; width: 100%; }
/ Улучшения для планшетов / @media (min-width: 768px) { body { font-size: 16px; padding: 20px; }
.content { display: grid; grid-template-columns: 1fr 1fr; width: 90%; } }
/ Улучшения для десктопов / @media (min-width: 1200px) { body { font-size: 18px; }
.content { grid-template-columns: 1fr 1fr 1fr; width: 1200px; } }
Читайте это так: для мобильных — шрифт 14px, одна колонка. Для планшетов добавляется медиа условие, которое увеличивает шрифт до 16px и создаёт grid из двух колонок. Для десктопов ещё одно условие — шрифт 18px и три колонки в grid.
Mobile First эффективнее, потому что браузер на мобильном устройстве загружает только базовые стили. Он не грузит медиа запросы для десктопов, потому что условие min-width не срабатывает на мобильных. Результат — сайта загружается быстрее.
Viewport: обязательный мета тег в HTML
Если вы напишете все медиазапросы в CSS, но забудете про viewport, ничто не будет работать. Браузер просто не поймёт, как отображать экрана.
В HTML добавьте в
этот мета тег:html
width=device-width говорит браузеру: «Ширина страницы должна быть равна ширине устройства». Без этого браузер может отображать всю страницу в полную ширину (1200px) даже на маленком мобильном экране. Текст станет нечитаемым, пользователю придётся масштабировать.
initial-scale=1 устанавливает начальный масштаб 100%. Страница не будет заранее увеличена или уменьшена.
Вот полна HTML структура:
html
Без viewport мета тага ваши медиа запросы в CSS не будут работать правильно.
Практические примеры: адаптивные стили в действии
Вот готовые примерами с кодом. Скопируйте их и используйте как основу для своих проектов.
Пример 1: Адаптивный размер шрифта
css / Для мобильных устройств / h1 { font-size: 20px; }
p { font-size: 14px; }
/ Для планшетов 768px и выше / @media (min-width: 768px) { h1 { font-size: 28px; }
p { font-size: 16px; } }
/ Для десктопов 1200px и выше / @media (min-width: 1200px) { h1 { font-size: 36px; }
p { font-size: 18px; } }
На мобильных заголовок 20px, на планшетах — 28px, на десктопе — 36px. Синтаксис медиазапроса остаётся одинаковым: ключевое слово @media плюс условие min-width.
Пример 2: Скрытие элементов на мобильных
css / По умолчанию видно везде / .sidebar { display: block; width: 25%; padding: 10px; }
/ На мобильных width меньше 768px скрыть sidebar / @media (max-width: 767px) { .sidebar { display: none; } }
На мобильных экранах меньше места, поэтому боковую панель скрывают (display none). Контент занимает всю ширину.
Пример 3: Адаптивный grid макет
css / Мобильная версия – одна колонка / .grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
/ Планшеты – две колонки / @media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
/ Десктопы – три колонки / @media (min-width: 1200px) { .grid { grid-template-columns: 1fr 1fr 1fr; gap: 25px; } }
На мобильных один элемент в строке, на планшете два, на десктопе три. gap (отступ между элементами) тоже увеличивается с размером экрана.
Все эти примеры работают во всех современных браузерах. Синтаксис медиазапросов стандартизирован и поддерживается везде, от мобильных телефонов до старых десктопов.