В каких случаях в веб-программировании используются данные единицы измерения - px, CSS px, dip?

#android #css #css3

Привет.

Запутался в вопросе, в каких случаях применяются эти единицы измерения - px, CSS
px, dip. 

Вот здесь я прочитал, что 


  Аппаратно-независимый пиксель (Device-independent pixel, dip):
  результат масштабирования пикселей устройства до размеров опорного
  пикселя для просмотра с нормального расстояния, представляет собой
  примерно одну величину на всех устройствах. Ширина экрана iPhone 5
  составляет 320 аппаратно-независимых пикселей.
  
  Пиксель CSS: единица, используемая для отображения страницы в области
  просмотра. При указании размеров в стилях (например, width: 100px)
  используются пиксели CSS. Отношение пикселей CSS к
  аппаратно-независимым пикселям является коэффициентом масштабирования
  страницы.


Но мне все равно непонятно, когда используется пиксель CSS, когда dip, а когда аппаратный
пиксель.
    

Ответы

Ответ 1

В 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-браузеров. В частности поэтому, при адаптивной
верстке, мы видим адаптацию при зуме страницы, а при зуме этой же страницы на мобильных
устройствах и планшетах - не видим.