absolute units: px

Слово "пиксель" имеет три значения:

• Элемент матрицы экрана
• Device-independent pixel (dip) - масштабированный, «кажущийся» размер пикселя
• CSS-пиксель

Вам важны только CSS-пиксели. Именно эти пиксели будут определять браузерам.

Вне CSS растровые изображния описываюся в пикслеях - координаты точки и цвет. Пропорции ширины и высоты также задаются в пикселях. Это помогает точно отобразить размеры и пропорции изображений с помощью CSS.

В браузере все, что отображено кратно пикселю, всегда будет иметь четкие и ровные края без размытия.

Масштаб: это изменение пикселей в размере (т.е. количество пикселей то же).

При масштабе в 100%, один CSS-пиксель точно равен одному пикселю устройства.

Изменение масштаба вызывает округление ( возможны артефакты):

В этом примере в браузуре FireFox при zoom 190% видно округление в меньшую сторону.

absolute units: mm/cm/in

По соображениям поддержки в браузерах существуют устаревшие единицы измерения - милиметры, сантиметры и дюймы.

Важно понимать, что сантиметры и милиметры CSS связаны с CSS пикселями, т.е. 24in экран монитора (60cm) может иметь то же разрешение в CSS пикселях как и 8in экран планшета.

Между собой абсолютные величины связаны таким соотношением: 96px = 1in = 2.54cm = 25.4mm = 72pt = 6pc

Измерейте школьной линейкой ширину блоков, выведенных ниже на экране. Ширина будет различой на различных экранах, но соотношение абсолютных единиц будет всегда точным.

WIDTH:

absolute units: pt/pc

Для вывода на печать желательно создавать специальные правила CSS на основе типографских единиц - пунктов и пик. Также есть и другие правила, подробности - здесь

Правила для печати помещаются в специальный контейнер внутри CSS файла: @media print { }

Пункты и пики связаны с CSS пикселями:

relative units: vh/vw

VIEWPORT или область просмотра браузера точно равна окну браузера.

Точнее viewport равен размерам внутренней части окна браузера, за исключением панелей и границ самого окна.

VIEWPORT не является частью HTML, поэтому вы не можете влиять на него CSS-правилами.

Однако мы можем устанавливать размер элементов HTML относительно размера вьюпорта.

• 1 vh - единица, равная 1/100'ой высоты viewport
• 1 vw - единица, равная 1/100'ой ширины viewport

relative units: vmin / vmax

То же, что и vh/vw , но применяются браузером в зависимости от того, что больше - ширина или выста.

Удобно использовать для задания размера шрифта при изменяющемя размере VIEWPORT.

relative units: rem/em

Единицы измерения относительно размеров шрифта

REM это размер относительно шрифта, заданного в теге html. По умолчанию браузер присваивает html шрифт размером 16px. Следовательно 1rem = 16px по умолчанию.

Но пользователь может переопределить дефолтный размер шрифта в своем браузере и поэтому всегда стоит явно определить размер шрифта в html

EM это размер относительно шрифта, заданного непосредственным предком элемента.

Следует избегать использования EM из-за эффекта умножения:

          
            
<div style="font-size: 12px" > 12px
                 
<div style="font-size:1.5em">       18px
                      
<div style="font-size:1.5em">   27px
                           
<div style="font-size:1.5em">40.5px</div>
                                 
 </div>  
 </div>  
  </div>
            
          
        

relative units: 1/%

Числовой коэффициент.

Для line-height можно задать относительное значение, выраженное числом без единиц измерения. Это важно использовать, т.к. если задать значение в любых других единицах, то значение line-height будет наследоваться.

Проценты %

Многие (но не все, как например border) свойства могут задаваться с помощью процентов.

В таких случаях всегда следует точно знать от чего беруться проценты. Например три совершенно разные источники для вычислений:

• height - % от высоты родительского элемента
• padding-top/bottom и margin-top/bottom - % от ширины родительского элемента
• transform: translate - от размеров элемента