Использование медиа-запросов в CSS

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

Что такое медиа-запросы

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

Синтаксис медиа-запроса

Вот базовый синтаксис медиа-запроса:

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

Например, чтобы применить стили только для экранов шириной 600 пикселей или меньше, можно использовать следующий код:

@media (max-width: 600px) {
    body {
        background-color: lightblue; /* Изменение фона на светло-голубой */
    }
    
    h1 {
        font-size: 24px; /* Уменьшение размера заголовка */
    }
}

Примеры медиа-запросов

/* Стили по умолчанию для больших экранов */
body {
    font-size: 16px;
    margin: 20px;
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Уменьшение размера шрифта */
        margin: 10px; /* Уменьшение отступов */
    }
}

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

@media (orientation: portrait) {
    body {
        background-color: peachpuff; /* Цвет фона для портретной ориентации */
    }
}

@media (orientation: landscape) {
    body {
        background-color: lightgreen; /* Цвет фона для ландшафтной ориентации */
    }
}

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

Заключение

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