В CSS вы не работаете с абсолютными единицами измерения, никогда. Дюймы, сантиметры - не задаются. Пиксели - используются относительные. И em, rem, vw - тоже относительные величины.
Это нужно, потому что сайты мы можем смотреть с очень широкого ряда устройств. Чтобы сайт везде выглядел читабельно - производители устройств сами регулируют отношение аппаратных пикселей их экранов к CSS-пикселям.
Плотность пикселей (отношение разрешения экрана к реальному размеру экрана) влияет на CSS-пиксели. Чем выше плотность - тем больше на экране CSS-пикселей и больше места для расположения элементов.
Но на устройствах с retina-дисплеями делают исключение:
Возьмем iPad с retina дисплеем. Фактическая его ширина в вертикальном положении - 1536 пикселей. Но размер экрана у него такой же, как и у не-retina версии. Поэтому для CSS устройство оставляет вдвое меньше пикселей, чем их на самом деле - 768 по ширине. Таким образом сайт, оптимизированный под не-retina iPad будет точно так же выглядеть и на retina iPad, верстка не поедет, потому что и в том, и в другом случае - CSS-ширина страницы 768 пикселей.
Также устройство может менять доступные CSS-пиксели для сайта при смене ориентации дисплея. Повернули планшет горизонтально - он сказал браузеру и сайту, что теперь по ширине у нас 1024 CSS-пикселей, а не 786, как было при вертикальной ориентации.
Еще вмешиваются браузеры. Когда мы делаем Zoom (масштабирование) страницы - фактически браузер говорит странице, что увеличилось или уменьшилось кол-во CSS-пикселей по ширине/высоте. Причем это свойственно только для desktop-браузеров. В частности поэтому, при адаптивной верстке, мы видим адаптацию при зуме страницы, а при зуме этой же страницы на мобильных устройствах и планшетах - не видим.