Информация об экране

DPR — это количество физических пикселей на один CSS-пиксель. DPR, равный 2, указывает на дисплей Retina, что означает, что изображения должны быть в 2 раза больше для чёткого отображения.

Разрешение экрана — это общее количество физических пикселей вашего монитора, тогда как область просмотра — это зона, где отображается содержимое в браузере, исключая панели инструментов и полосы прокрутки.

Привязка контрольных точек к именам конкретных устройств гарантирует, что они сломаются с выходом нового аппарата. Режьте там, где сама вёрстка начинает выглядеть неправильно. На практике 480, 768, 1024 и 1280 px — привычные отправные значения, но это удобные для памяти числа, а не правила. Медленно сужайте окно браузера и следите, при какой ширине строки становятся слишком длинными или карточка сплющивается; поставленная там точка держится куда дольше.

Потому что CSS-пиксель — единица видимого размера, а не физическая точка. На 4K-экране при масштабе 200% 3840 физических точек показываются как 1920 CSS-пикселей, и именно это делает текст и значки плотнее и чётче. Коэффициент пикселей устройства при этом равен 2, поэтому ради резких изображений нужно через srcset отдавать файл вдвое большего разрешения, чем отображаемый размер.