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

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

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

Синтаксис директивы @media

@media (условие) {
    /* CSS-правила */
}

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

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

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

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

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

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

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

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (max-width: 767px) {
    .container {
        width: 100%;
    }
}

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

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

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

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

@media (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

@media (orientation: portrait) {
    body {
        background-color: lightcoral;
    }
}

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

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

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

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

@media (min-resolution: 2dppx) {
    img {
        max-width: 100%;
    }
}

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

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

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

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

@media (min-width: 600px) and (max-width: 1200px) {
    .sidebar {
        display: none;
    }
}

@media (min-width: 1201px) {
    .sidebar {
        display: block;
    }
}

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

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

Пример 1: Адаптивная сетка

/* Стили для десктопов */
.container {
    display: flex;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    padding: 20px;
}

/* Стили для планшетов */
@media (max-width: 768px) {
    .column {
        flex: 100%;
    }
}

/* Стили для мобильных устройств */
@media (max-width: 480px) {
    .container {
        flex-direction: column;
    }

    .column {
        padding: 10px;
    }
}

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

Пример 2: Адаптивные шрифты

body {
    font-size: 16px;
}

@media (max-width: 1200px) {
    body {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 10px;
    }
}

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

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

.header {
    display: block;
}

@media (max-width: 768px) {
    .header {
        display: none;
    }
}

@media (min-width: 769px) {
    .mobile-header {
        display: none;
    }
}

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

Заключение

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