Оригінальна публікація: CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained

Багато властивостей у CSS (наприклад, width, margin, padding та font-size) використовують довжину, а CSS має багато різних способів для її вираження.

Довжина в CSS — це число та одиниця без пробілу. Наприклад, 5px, 0.9em і так далі.

Існує два загальних типи одиниць, які використовують для довжини і розміру в CSS: абсолютні та відносні.

Абсолютні одиниці довжини

Абсолютні одиниці довжини базуються на фактичній фізичній одиниці та зазвичай однакового розміру на всіх пристроях. Однак залежно від розміру та якості вашого екрана або налаштувань у вашому браузері чи ОС можуть бути деякі винятки.

Ось декілька поширених абсолютних одиниць довжини в CSS:

px

Пікселі, або px, є одними з найпоширеніших одиниць довжини в CSS.

У CSS 1 піксель офіційно визначено як 1/96 дюйма. Усі інші абсолютні одиниці довжини базуються на цьому визначенні пікселя.

Але коли цей стандарт був сформульований, більшість моніторів мали роздільну здатність 1024 x 768 та DPI (кількість точок на дюйм) 96.

Екрани на сучасних пристроях мають набагато вищу роздільну здатність і DPI, тому лінія довжиною 96 пікселів може не вимірювати точно 1 дюйм, залежно від пристрою.

Незважаючи на те, що розміри в пікселях можуть змінюватися на різних пристроях, загалом вважається, що для екранів краще використовувати пікселі.

Якщо ви знаєте, що ваша сторінка буде надрукована на високоякісному принтері, тоді можна розглянути можливість використання іншої одиниці: наприклад, cm або mm.

У цій статті ви можете дізнатися більше про історію пікселів та чому CSS-дюйм не завжди відповідає фізичному дюйму (англійською мовою).

cm

Сантиметри.

У CSS 1cm приблизно дорівнює 37,8 пікселя або близько 25,2/64 дюйма.

mm

Міліметри.

У CSS 1mm приблизно дорівнює 3,78 пікселя або 1/10 сантиметра.

in

Дюйми.

У CSS 1in приблизно дорівнює 96 пікселів або близько 2,54 см.

pt

Пункти.

У CSS 1pt приблизно дорівнює 1,3333 пікселя або 1/72 дюйма.

pc

Піки.

У CSS 1pc приблизно дорівнює 16 пікселів або 1/6 дюйма.

Відносні одиниці довжини

Відносні одиниці довжини залежать від розміру або налаштувань іншого елемента. Наприклад, відносний розмір шрифту елемента може розраховуватися з використанням розміру шрифту батьківського елемента.

Ось декілька поширених відносних одиниць довжини:

em

Одиниця em у CSS отримала свою назву від типографічної одиниці. У типографії термін em спочатку стосувався ширини великої літери M у використовуваному шрифті та розмірі.

Коли використовується із властивістю font-size, em успадковує розмір шрифту від батьківського елемента:

.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}

У цьому прикладі розмір шрифту елемента p становить 16px (16 * 1). Тим часом розмір шрифту h2 становить 48px (16 * 3), а для h3 — 32px (16 * 2).

Якщо em використовується з іншою властивістю (наприклад, width), то em розраховується з використанням розміру цільового елемента.

rem

Ця відносна одиниця не залежить від розміру або налаштувань батьківського елемента, а базується на корені документа. Для вебсайтів коренем документа є елемент html.

p {
  font-size: 1.25rem;
}

У більшості браузерів розмір шрифту за замовчуванням становить 16, тому розмір шрифту елементів html становить 16px. Отже, у цьому випадку елемент p дорівнює 20px (16 * 1,25).

Але якщо користувач змінить розмір шрифту за замовчуванням у своєму браузері, то розмір шрифту елемента p буде масштабуватися відповідно.

%

Відсотки, або розмір відносно розміру батьківського елемента:

div {
  width: 400px;
}

div p {
  width: 75%;
}

Оскільки ширина батьківського елемента становить 400px, то шириною внутрішнього абзацу буде 300px (400 * 0,75).

vw

1vw — це 1% ширини вікна перегляду.

Наприклад:

body {
  width: 100vw;
}

Оскільки елемент body має значення 100vw, або 100% ширини вікна перегляду, він займатиме всю доступну ширину. Отже, якщо ви зміните розмір вашого браузера на 690 пікселів у ширину, то body займе всі 690 пікселів у ширину.

vh

1vh — це 1% висоти вікна перегляду.

Наприклад:

div {
  height: 50vh;
}

Елемент div займе 50% висоти вікна перегляду. Отже, якщо висота вікна браузера становить 900 пікселів, висота div дорівнюватиме 450 пікселів.

ex

Одиниця ex у CSS отримала свою назву від x-height у типографії, або «висоти літери x у шрифті». У багатьох шрифтах символ малої літери x зазвичай становить приблизно половину висоти найбільшого символу.

У CSS 1ex — це x-height шрифту або половина 1em.

Але оскільки розмір малої літери x може значно відрізнятися залежно від шрифту, одиниця ex використовується рідко.

ch

Одиниця ch у CSS визначається як ширина символу 0 (нуль, або U+0030) шрифту.

Хоча одиниця ch працює як точне вимірювання для моноширинних/фіксованих шрифтів (наприклад, Courier), вона може бути непередбачуваною з пропорційними шрифтами (наприклад, Arial).

Наприклад, якщо ви використали шрифт Courier і встановили ширину елемента на 60ch, то ширина цього елемента дорівнюватиме рівно 60 символам.

Але якщо ви використали шрифт Arial і встановили ширину елемента на 60ch, то неможливо сказати, якою буде ширина елемента: символи можуть переповнювати контейнер або не досягати його меж.

Зображення, яке показує 20ch як точне вимірювання у Courier, але неточне в Helvetica та Georgia.
Джерело

Щоб дізнатись більше про одиницю ch та розглянути пару прикладів, див. цю статтю (англійською мовою).

vmin та vmax

Одиниці vmin та vmax базуються на значеннях vw та vh.

1vmin — це 1% найменшого виміру вікна перегляду, а 1vmax — це 1% найбільшого виміру вікна перегляду.

Наприклад, уявіть вікно браузера, ширина якого 1200 пікселів, а висота — 600 пікселів. У цьому випадку 1vmin дорівнює 6px (1% від vh, що менше для розміру 600 пікселів). Тим часом 1vmax дорівнює 12px (1% від vh, що більше для розміру 1200 пікселів).