Урок 31. Обзор урока: Проблемы разных экранов: viewport и DPR

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~65 мин 🎯 Сложность: Средняя

⚡ Кратко

Почему один макет выглядит по-разному на телефоне, ноутбуке и ретина-экране:

viewport + meta viewport задают рабочую ширину; без meta мобильный браузер «притворяется» десктопом.
DPR определяет чёткость графики на retina (1 CSS-px = 2–3 физических).
vw/vh — единицы от размеров окна; breakpoint ставится там, где тесно содержимому.

О чём урок

Разбираем, почему один и тот же макет выглядит по-разному на телефоне, ноутбуке и ретина-экране: viewport задаёт рабочую ширину, DPR влияет на чёткость графики, а breakpoint появляется там, где контенту становится тесно.

Дальше сравним fixed, fluid, adaptive и responsive подходы.