Гайд по директиве @media в CSS

В эпоху множества устройств и экранов разных размеров адаптивный веб-дизайн стал необходимостью. Чтобы обеспечить оптимальный пользовательский опыт независимо от устройства, веб-разработчики используют медиа-запросы (Media Queries). Это мощный инструмент CSS, позволяющий применять разные стили в зависимости от характеристик устройства. В этой статье мы подробно изучим синтаксис, возможности и лучшие практики использования директивы @media, чтобы вы могли создавать по-настоящему адаптивные веб-сайты. В конце статья я также оставил вам блок бесплатных материалов для обучения разработке.

Основы директивы @media

Директива @media позволяет применять определённые CSS-правила только при выполнении заданных условий. Эти условия могут включать размеры экрана, ориентацию устройства, разрешение и другие параметры. Синтаксис директивы @media:

Пример базового использования @media

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

Директива @media играет ключевую роль в создании адаптивных веб-сайтов, позволяя применять различные стили в зависимости от характеристик устройства. Однако, для эффективного использования @media необходимо понимать, как работают медиа-запросы, как определять характеристики устройства и как создавать макеты, которые отлично выглядят на любом экране. Если вы хотите углубить свои знания в области адаптивной верстки и научиться создавать профессиональные веб-сайты, наш курс HTML и CSS станет для вас незаменимым помощником. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Типы условий в директиве @media

Размер экрана

Наиболее часто используемыми условиями являются размеры экрана: min-width, max-width, min-height и max-height.

Пример использования условий размера экрана

В этом примере контейнер будет иметь фиксированную ширину 750 пикселей на экранах шире 768 пикселей и занимать 100% ширины на экранах уже 767 пикселей.

Ориентация устройства

Условия orientation позволяют применять стили в зависимости от ориентации устройства: landscape (альбомная) или portrait (портретная).

Пример использования условия ориентации

В этом примере фоновый цвет страницы изменится в зависимости от ориентации устройства.

Разрешение экрана

Условия resolution позволяют задавать стили в зависимости от разрешения экрана. Разрешение указывается в dpi (точек на дюйм) или dppx (пикселей на точку CSS).

Пример использования условия разрешения

В этом примере изображение будет масштабироваться до 100% ширины контейнера на устройствах с высоким разрешением экрана.

Совмещение условий

Можно комбинировать несколько условий с помощью логических операторов and, not, only и , (запятая).

Пример комбинирования условий

В этом примере боковая панель скрывается на экранах шириной от 600 до 1200 пикселей и отображается на экранах шириной более 1200 пикселей.

Примеры использования директивы @media

Адаптивная сетка

В этом примере используется flexbox для создания адаптивной сетки, которая изменяется в зависимости от ширины экрана.

Адаптивные шрифты

В этом примере размер шрифта изменяется в зависимости от ширины экрана, обеспечивая удобочитаемость на всех устройствах.

Скрытие элементов на разных устройствах

В этом примере обычный заголовок скрывается на устройствах с шириной экрана менее 768 пикселей, а мобильный заголовок отображается только на устройствах с шириной экрана более 769 пикселей.

Заключение

Освоение медиа-запросов — ключевой навык для современного веб-разработчика. Директива @media позволяет создавать гибкие, адаптивные и удобные интерфейсы, которые обеспечивают отличный пользовательский опыт на любых устройствах. Понимание синтаксиса, возможностей и лучших практик использования @media позволит вам создавать веб-сайты, которые выглядят и функционируют превосходно на всех экранах, от смартфонов до больших настольных мониторов. Непрерывно тестируйте и совершенствуйте свои адаптивные дизайны, чтобы оставаться на передовой веб-разработки.

Владение директивой @media — это необходимый навык для современного веб-разработчика, но для создания полноценных адаптивных веб-сайтов необходимо владеть и другими техниками, такими как Flexbox и Grid. Чтобы получить комплексные навыки в области веб-разработки, рекомендуем вам наш курс HTML и CSS. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.

Бесплатные полезности

1. Смотрите видео: код-ревью, собеседования и новости разработки на нашем Дзене – https://dzen.ru/purpleschool?tab=longs

2. Создайте личный план обучения и получите доступ к базе из 500+ бесплатных уроков в бесплатных картах развития на нашем сайте – https://purpleschool.ru/skills

3. Разберитесь в том, как устроен мир IT на бесплатном курсе «Основы разработки» – https://purpleschool.ru/course/code-basics