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

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

⚡ Кратко

Шпаргалка: meta viewport, window.devicePixelRatio (DPR), @media (min-width: …) (breakpoint), единицы vw/vh и CSS-пиксель.

Справочник урока

ИнструментЗачем нуженМини-пример
meta viewportВключает корректную мобильную раскладку<meta name="viewport" content="width=device-width, initial-scale=1">
viewportРабочая область страницы в браузереwindow.innerWidth
DPRСоотношение физических пикселей к CSS-пикселямwindow.devicePixelRatio
vw / vh1% ширины / высоты viewportwidth: 50vw; height: 30vh;
breakpointТочка, где меняется раскладка@media (min-width: 48rem) { ... }
CSS pixelЕдиница CSS-раскладки, независимая от плотности экранаwidth: 320px;
image-set()Картинка под разный DPRimage-set(url(a.jpg) 1x, url(a@2x.jpg) 2x)

Как читается DPR

CSS-px × DPR = физические px 200 CSS-px × 2 = 400 физических
Размер файла растровой картинки = CSS-размер × DPR.
Практическое правило: адаптивность начинается не с набора размеров устройств, а с поведения содержимого в доступной ширине.

Навигация