CSS-пиксель - это абстрактная единица, используемая браузерами для рисования изображений и другого содержимого на веб-странице. CSS-пиксели - это DIP, что означает, что они являются независимыми от устройства пикселями. Они корректируют себя в соответствии с плотностью пикселей экрана, на котором они отображаются.
Если у нас есть следующий фрагмент кода:
<div style=”width:150px; height:200px”></div>
Вышеуказанный HTML-компонент будет выглядеть размером 150 на 200 пикселей на стандартном дисплее, а 300 на 400 на экране Retina, чтобы сохранить тот же физический размер.
Пиксель CSS является «эталонным» пикселем, а не пикселем устройства. Это вводит в заблуждение, и лично я предпочитаю понятие «пользовательский блок», которое использует SVG, потому что я думаю, что легче затем объясните сопоставление с физическими единицами и пикселями устройства. Но как только вы поймете, что «px» на самом деле является ссылкой, а не пикселем устройства, все становится более понятным. Следует помнить, что CSS px - это абстрактная единица, и существует отношение, управляющее тем, как он а) отображает фактические пиксели устройства и b) отображает физические единицы (фиксированным образом, соотношение всегда равно 96 CSS пикселям к дюйм). * * тысяча тридцать-два
CSS-дюйм точно или «близок» к дюйму. На устройствах с высоким разрешением, и если никакие другие параметры не мешают (например, пользовательский зум или CSS-преобразования), дюйм будет физическим дюймом, так как ожидается. На устройствах с низким разрешением будет предел погрешности, как описано выше.
Важнее всего масштабируемость и адаптивность. Наиболее важным аспектом для большинства разработчиков является то, что макет контента может изменяться и адаптироваться в единицах масштабирования предсказуемым и разумным способом. Хотя концепция сохранения точного соотношения сторон на всех устройствах может показаться привлекательной, она имеет нежелательные последствия для устройств с низким разрешением (например, нежелательное сглаживание, вызывающее размытый рендеринг).