Урок 07 · 11 хв

Адаптив: @media

Спершу нормальна вузька колонка, потім розширюєш. Не навпаки — «сховати на мобілці».

@media (min-width: 40rem) { … } — правила, коли в'юпорт ширший. Пікселі 768px крихкі до зуму; rem спокійніший. meta viewport в HTML обов'язковий, інакше «мобілка» бреше шириною 980.

Від колонки до ряду

Можна спитати про це правило«Mobile first»

prefers-reduced-motion — менше анімації, якщо людину заколисує.
Не ховай контент лише CSS «для мобілки», якщо він потрібен. Той самий сенс, інший ряд.
Контейнер width: min(70rem, 100% - 2rem) часто знімає половину медіазапитів.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. min-width: 40rem спрацьовує, коли
2. Без meta viewport на телефоні
3. Картинка ширша за колонку. Що поставити?