3 задания: объяснить viewport/DPR словами, сверстать карточку с breakpoint по содержимому, проверить ширины в DevTools. Решения — на странице «Решения».
Задания
Разбор: объясните своими словами, как в теме урока работают viewport, layout viewport и visual viewport, и зачем нужна строка meta viewport.
Код: создайте страницу с карточкой, которая не шире контейнера и корректно меняется между 320px, 768px и 1200px. Ожидаемое поведение — на схеме ниже.
DPR: откройте консоль и выведите window.devicePixelRatio своего экрана. Какого размера должен быть файл картинки, чтобы логотип 150×150 CSS-px был чётким?
Проверка: откройте DevTools, найдите момент, где контенту становится тесно, и запишите этот breakpoint рядом с CSS-правилом.
Ожидаемый результат задания 2
До breakpoint — вертикальный стек, после — две колонки рядом.