Главная страница » CSS » 35. Медиа запросы

35. Медиа запросы

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

Основы медиа запросов

Медиа запросы работают, проверяя различные параметры устройства, такие как ширина экрана, высота, разрешение и ориентация, и применяют CSS-стили в зависимости от результатов этих проверок.

1. Базовый синтаксис

Медиа запросы включаются в CSS-файл с помощью правила @media, за которым следует условие и блок стилей.

Пример:

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

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

2. Использование нескольких условий

Вы можете комбинировать несколько условий, используя логические операторы and, or, и not.

Пример:

				
					@media (min-width: 600px) and (max-width: 1200px) {
    .container {
        background-color: lightgreen;
    }
}

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

3. Ориентация экрана

Медиа запросы также могут проверять ориентацию экрана устройства (портретная или альбомная).

Пример:

				
					@media (orientation: landscape) {
    .container {
        background-color: lightcoral;
    }
}

Этот стиль будет применяться, когда устройство находится в альбомной ориентации.

Распространённые медиа запросы

Минимальная и максимальная ширина экрана

				
					/* Применяется для экранов шириной до 768px (мобильные телефоны) */
@media (max-width: 768px) {
    .box {
        width: 100%;
    }
}

/* Применяется для экранов шириной от 769px до 1024px (планшеты) */
@media (min-width: 769px) and (max-width: 1024px) {
    .box {
        width: 50%;
    }
}

/* Применяется для экранов шириной более 1024px (десктопы) */
@media (min-width: 1025px) {
    .box {
        width: 25%;
    }
}

Ориентация и плотность экрана

				
					/* Применяется для экранов в портретной ориентации */
@media (orientation: portrait) {
    .box {
        height: 50vh;
    }
}

/* Применяется для экранов с высоким разрешением (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .box {
        border: 2px solid black;
    }
}

Советы по использованию медиа запросов

Мобильные сначала (Mobile First): Начинайте с базовых стилей для мобильных устройств, а затем добавляйте медиа запросы для больших экранов. Это позволяет обеспечить более оптимизированный пользовательский опыт на мобильных устройствах.
Проверяйте на реальных устройствах: Эмуляторы и инструменты разработчика в браузерах могут не всегда точно отображать поведение медиа запросов. Проверяйте стили на реальных устройствах для лучшего понимания.
Используйте относительные единицы: Вместо фиксированных значений используйте относительные единицы (например, %, vw, vh) для более гибкого дизайна, который легко адаптируется к различным размерам экранов.

Распространённые ошибки

Недостаточная поддержка старых браузеров: Некоторые старые браузеры могут не полностью поддерживать медиа запросы. Убедитесь, что ваш дизайн работает корректно на основных браузерах.
Слишком много медиа запросов: Избегайте избыточного количества медиа запросов, которые могут усложнить поддержание стилей. Оптимизируйте свои запросы и правила.
Игнорирование мелких экранов: Не забывайте тестировать и оптимизировать ваш сайт для небольших экранов, таких как мобильные телефоны.

Заключение

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

Тестовое задание

Создайте HTML-документ с несколькими элементами, такими как контейнеры, блоки и текст, и примените стили с использованием медиа запросов для разных размеров экранов.
Настройте стили для мобильных устройств, планшетов и десктопов, чтобы они адаптировались под различные размеры экранов.
Проверьте, как ваш макет выглядит и работает на различных устройствах и в разных ориентациях экрана.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            padding: 20px;
            background-color: lightgray;
        }
        .box {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            margin: 10px 0;
        }

        /* Мобильные устройства */
        @media (max-width: 768px) {
            .box {
                width: 100%;
                font-size: 16px;
            }
        }

        /* Планшеты */
        @media (min-width: 769px) and (max-width: 1024px) {
            .box {
                width: 50%;
                font-size: 18px;
            }
        }

        /* Десктопы */
        @media (min-width: 1025px) {
            .box {
                width: 25%;
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Контент 1</div>
        <div class="box">Контент 2</div>
        <div class="box">Контент 3</div>
    </div>
</body>
</html>

Этот урок поможет вам освоить использование медиа запросов для создания адаптивных веб-дизайнов и оптимизации пользовательского опыта на различных устройствах.