Одиниці виміру довжини в css
Абсолютні одиниці вимірювання довжини
пікселі px
Піксель, можливо, краще за все розглядати як «абстрактну величину», так як він не має нічого спільного з фізичним пікселем вашого дисплея.
CSS-пікселі - абстрактна величина, яка використовується браузерами для точного відображення контенту на сторінках, незалежно від екрану.
Дюйм (від нід. Duim - великий палець) - одиниця виміру відстані в деяких європейських неметричних системах заходів. У css дюйми просто зіставляються з пікселями. Проте, варто зазначити, що дюйми дуже рідко використовуються в CSS.
сантиметри cm
Сантиметр - одиниця довжини в різних метричних системах заходів, рівна 0,01 метра. У css також зіставляється з пікселями.
міліметри mm
Шрифт-залежні одиниці виміру
Відносна одиниця виміру. У поліграфії використовуються додаткові одиниці виміру - одна з них відповідають ширині великої букви М. Основна властивість впливає на розмір шрифту - font-size.
Без всяких додаткових css правил 1em працює так:
Якщо в документі змінити розмір шрифту, 1em стає рівним поточному (встановленому) розміром шрифту.
Існують деякі на перший погляд дивні речі. Якщо елемент з розміром шрифту 1.1em знаходиться в елементі з font-size рівним також 1.1em. плюс вони мають спільного батька, у якого шрифт дорівнює 1.1em. то результуюча висота шрифту самого вкладеного елемента буде дорівнює 1.1 X 1.1 X 1.1 == 1.331em. Тобто ви повинні враховувати наступне: коли ви призначаєте елементу розмір шрифту рівний, наприклад, 10em. і то це зовсім не означає, що куди б ви не вклали елемент, його шрифт буде дорівнює 10em. Все залежить від контексту (побачити доказ).
Rems пропонують кращу альтернативу em s. Вони працюють майже однаково, за винятком одного ключового відмінності: одиниці rem завжди співвідноситься з фіксованим базовим значенням, а саме - з розміром шрифту кореневого елементу документа (у разі HTML це завжди елемент html).
Неповна підтримка браузерами: не працює в IE 8, Safari 4, або iOS 3.2.
Пункти - одиниця виміру рівна 1/72 дюйма. Пункти дуже поширені за межами CSS (ймовірно, тому вони і включені в CSS).
Пункти відмінно підходять для друку, але ніщо не заважає вам використовувати пункти і на сайті. Хоча варто відзначити, що браузери не завжди однаково відображають пункти.
Та ж історія, що і з пунктами, але 1pc == 12pt.
Ця одиниця виміру заснована на висоті букви х (в нижньому регістрі) поточного шрифту. Іноді інформація про висоту літери x вбудована в сам шрифт, іноді браузер обчислює цю висоту шляхом вимірювання висоти символу в нижньому регістрі, і в гіршому випадку, браузер просто встановлює цю висоту як 0.5em. Щоб зрозуміти, чому використовується x-висота, уявіть верхній виносний елемент (ascender), наприклад, у малої літери d. Х-висота не включає цю виноску.
На відміну від em s, які не змінюються при зміні властивості font-family. одиниці виміру ex поміняються, коли ви зміните значення у властивості font-family (доказ).
По духу схожа на x-висоту, тільки замість x-висоти, використовується ширина символу 0. Також змінюється при зміні значення у властивості font-family.
Підтримка браузерами: на даний момент не підтримується браузерами на основі webkit (safari, яндекс, chrome).
1vmin приймає 1vw або 1vh. в залежності від того, що менше. При визначенні розміру стандартного шрифту vmin може бути набагато корисніше, ніж vh або vw.
1vmin приймає 1vw або 1vh. в залежності від того, що більше.
Підтримка браузерами: браузери на основі webkit підтримують vmin, але не підтримують vmax (поки). Firefox підтримує vmax.
Відстань заданий в процентах залежить від того ж властивості батьківського елемента. Наприклад, якщо елемент має ширину рівну 450px. а його елемент-дитина ширину рівну 50%. то ширина елемента-дитини булет дорівнює 225px.
Технічно відсотками не можна виміряти довжину, але я включив відсотки в дану статтю, так як довжина і відсотки взаємопов'язані.
