5

Привет.

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

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

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

Пиксель CSS: единица, используемая для отображения страницы в области просмотра. При указании размеров в стилях (например, width: 100px) используются пиксели CSS. Отношение пикселей CSS к аппаратно-независимым пикселям является коэффициентом масштабирования страницы.

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

1

1 ответ 1

8

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

8
  • 1
    Тогда, возможно, отметите этот ответ как ответ? У вас из 16 вопросов только один отмечен, как отвеченный. Commented 25 авг. 2016 в 11:31
  • 1
    в этом ответе не сказано, когда используются пиксели "железа", когда - CSS-пиксели, а когда - dip-пиксели.
    – Dimon
    Commented 25 авг. 2016 в 11:39
  • В css пиксели "железа" и dip-пиксели не используются никогда, и никогда не будут Commented 25 авг. 2016 в 11:42
  • я не про CSS, а вообще
    – Dimon
    Commented 25 авг. 2016 в 11:46
  • в CSS-декларациях используются только CSS-пиксели. это мне понятно. вопрос был в том, КОГДА (в каких случаях) применяются эти разные виды пикселей.
    – Dimon
    Commented 25 авг. 2016 в 11:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.