🤔 Как работают медиа запросы про мобильные приложения?

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

🚩Основные аспекты

🟠Ширина экрана (Viewport Width)
Один из наиболее часто используемых параметров для медиа-запросов — ширина экрана устройства.

@media (max-width: 600px) {
    /* Стили для мобильных устройств */
}   

🟠Ориентация (Orientation)
Медиа-запросы могут применяться в зависимости от ориентации устройства: портретная (вертикальная) или альбомная (горизонтальная).

@media (orientation: portrait) {
    /* Стили для портретной ориентации */
}

@media (orientation: landscape) {
    /* Стили для альбомной ориентации */
}   

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

@media (min-resolution: 2dppx) {
    /* Стили для экранов с высоким разрешением */
}   

🚩Примеры

Изменение стилей для мобильных устройств

/* Основные стили для всех устройств */
body {
    font-size: 16px;
    background-color: white;
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: lightgrey;
    }
}

Адаптация макета для планшетов и мобильных устройств

/* Основные стили для десктопов и планшетов */
.container {
    display: flex;
    flex-direction: row;
}

/* Стили для планшетов (ширина 601px до 1024px) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
}

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

🚩Подходы

🟠Мобильный подход (Mobile-First)
В этом подходе основные стили пишутся для мобильных устройств, а затем добавляются медиа-запросы для планшетов и десктопов.

/* Основные стили для мобильных устройств */
body {
font-size: 14px;
}

/* Стили для планшетов и десктопов */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}

@media (min-width: 1024px) {
body {
font-size: 18px;
}
}

🟠Десктопный подход (Desktop-First)
В этом подходе основные стили пишутся для десктопов, а затем добавляются медиа-запросы для планшетов и мобильных устройств.

/* Основные стили для десктопов */
body {
font-size: 18px;
}

/* Стили для планшетов */
@media (max-width: 1024px) {
body {
font-size: 16px;
}
}

/* Стили для мобильных устройств */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}

Ставь 👍 и забирай 📚 Базу знаний