Урок 9: Адаптивный дизайн 📱

Сайты открывают и на огромных мониторах, и на узких смартфонах. Чтобы дизайн не ломался, он должен адаптироваться под размер экрана. Для этого в CSS есть Медиа-запросы (@media).

Медиа-запросы в действии

В коде этой страницы мы написали правило: "Если ширина экрана меньше 600 пикселей, измени направление Flexbox с горизонтального на вертикальное (column)".

Проверьте сами:

Если вы смотрите это на смартфоне (вертикально), два синих блока ниже будут стоять друг под другом. Если перевернете телефон горизонтально (или откроете на компьютере), они встанут в один ряд!

Код:

@media (max-width: 600px) {
    .flex-container {
        flex-direction: column; /* Элементы падают друг под друга */
    }
}