Одиниці виміру в css

Фізичні одиниці:

cm	сантиметр	1cm = 96px/2.54 ≈ 37,795px
mm	міліметр	1mm = 1/10 от 1cm
q	четверть міліметра	1q = 1/40 от 1cm = 0.25mm ≈ 0.945px
in	дюйм	1in = 2.54cm = 96px
pc	піка	1pc = 1/6 от 1in
pt	пункт, точка	1pt = 1/72 от 1in
px	піксель	1px = 1/96 от 1in, 0.75 от pt

Специфікація

Тут читаємо детальніше про розмір

--

З фізичних одиниць ще може представляти інтерес q це відносно нова одиниця, і вона підтримується не всіма браузерами. q-це 0.25 mm.

 q — це приблизно 0.945 px, тобто в деяких випадках цілком можна використовувати її замість пікселів, виходить один символ (q) замість двох (px) - можна спробувати використовувати її для зменшення розміру коду.

Одиниці виміру які прив'язані до шрифту:

em	розмір шрифту елемента
ex	висота x в нижньому регістрі
ch	ширина 0 (ZERO, U+0030)
rem	розмір шрифта корньового елемента

--

em - для font-size це успадкований розмір шрифту, для інших властивостей-поточний розмір шрифту, вже обчислений для font-size.

Так відбувається тому що 1em-це поточний успадкований розмір шрифту, а .75em-успадкований шрифт, зменшений на чверть. Для кожного нового вкладеного Діва спочатку успадковується зменшений шрифт батька, а потім теж зменшується заданим чином.
Про це потрібно пам'ятати, якщо ви захочете задавати в em розміри перевикористовуваних компонентів: при вкладанні елементів один в одного обчислене значення em може виявитися не тим, що хотілося б отримати.

ex - це висота літери x в нижньому регістрі. Якщо в шрифті немає відповідної метрики, і в ньому немає такого символу, браузер спробує обчислити ex самостійно. Якщо це з якихось причин неможливо, ex вважається рівним .5em.

На відміну від em, розмір ex буде змінюватися разом зі шрифтом, і у всіх випадках 2EX не дорівнює 1em, тобто на співвідношення в .5 покладатися не можна.  ex точно також як і em успадковує розмір шрифту батька, але буде відрізнятись при різних видах шрифтів:

ch - ширина символу 0. Для моноширинних шрифтів це точна ширина будь-якого символу, для інших — приблизна ширина одного вузького символу. Якщо з якихось причин ширину неможливо обчислити, запасним значенням буде .5em.

Очевидно, що:

• 1ch більше 1ex (ширина 0 більше висоти x);
• 1ch не дорівнює половині em;
• Значення ch може змінюватися разом зі шрифтом.

rem - це root em, розмір шрифту кореневого елемента, для веб-сторінки це елемент html. Розмір шрифту за замовчуванням-16px. Це значення не зафіксовано в специфікації, але використовується всіма браузерами. Якщо користувач в налаштуваннях браузера задасть інше значення, воно перевизначити розмір шрифту кореневого елемента. Тобто якщо потрібно зробити інтерфейс, який буде масштабуватися під розмір шрифту, обраний користувачем, в якості одиниці виміру зручно використовувати саме rem.
На відміну від em, ram завжди містить розмір шрифту тільки кореневого елемента, тому вкладеність ні на що не впливає:

 

Одиниці виміру прив'язані до розміру екрана.

vw	1% ширини вьюпорта
vh	1% висоти вьюпорта
vmin	1% від меньшого з vw і vh
vmax	1% від більшого з vw і vh

Ці одиниці призначені для створення елементів, розмір яких повинен залежати від розміру вікна (вьюпорта).
100vh - це висота вьюпорта, дуже зручно для елементів, які повинні розтягуватися на всю сторінку. Ось приклад простої галереї, де кожна картинка буде повністю займати один екран незалежно від розмірів вікна браузера:

Поєднання розміру різних типів.

 *{font-size: calc(1em + 0.5vw);}

Стандартні розміри екранів