Адаптивный дизайн: от мобильной версии до desktop-first

Что такое адаптивный дизайн

Адаптивный (responsive) дизайн — это подход к созданию веб-сайтов, при котором один сайт корректно отображается на всех устройствах: от смартфонов до больших мониторов.

Подходы к адаптивности

Mobile-First

Разработка начинается с мобильной версии, затем добавляются стили для больших экранов:

/* Базовые стили для мобильных */
.container {
    width: 100%;
    padding: 10px;
}

/* Стили для планшетов */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        padding: 20px;
    }
}

/* Стили для десктопов */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
        padding: 30px;
    }
}

Desktop-First

Разработка начинается с десктопной версии, затем стили адаптируются для меньших экранов:

/* Базовые стили для десктопов */
.container {
    max-width: 1170px;
    padding: 30px;
}

/* Стили для планшетов */
@media (max-width: 1199px) {
    .container {
        max-width: 750px;
        padding: 20px;
    }
}

/* Стили для мобильных */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

Breakpoints (точки перелома)

Стандартные breakpoints:

• Mobile: до 576px
• Tablet: 576px - 768px
• Desktop: 768px - 1024px
• Large Desktop: 1024px+

Flexbox для адаптивности

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 1 300px; /* grow, shrink, basis */
    min-width: 0;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

CSS Grid для сложных макетов

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

Адаптивные изображения

<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Описание">
</picture>

<img src="image.jpg" 
     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     alt="Описание">

Адаптивная типографика

/* Fluid typography */
h1 {
    font-size: clamp(24px, 5vw, 48px);
}

p {
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.6;
}

Тестирование

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

Заключение

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