Одиниці вимірювання CSS - PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Ділюсь технічними навичками та уроками з HTML-верстки.

Абсолютна одиниця - не залежить від значень інших властивостей. Її можна назвати ще фіксованою або остаточною.

Відносна одиниця - залежить від того чи іншого значення інших властивостей.

PX - пікселі

Абсолютна (фіксована) одиниця. Значення задане в пікселях (px), чітке і зрозуміле.
Як правило, в макетах дизайну ми бачимо розміри саме в пікселях. Тому, використовуючи цю одиницю, ми легко можемо переносити дані в код з точністю піксель перфект. Це коли макетні розміри збігаються з версткою на всі 100%.
Решта одиниць, так чи інакше перераховуються браузером все одно в пікселі.
Пікселі можуть бути дробовими, наприклад розмір можна задати в 16.5px.

Приклади

( i ) Розмір шрифту браузера за замовчуванням 16px

( i ) Властивість font-size успадковується нащадками

<div>
	Звичайний текст
	<div style="font-size: 20px;">Привіт! Це Фрілансер по життю!
		<div style="font-size: 17.5px;">Живи, а працюй у вільний час!
			<div>Підписуйся!</div>
			<div style="font-size: 14.7px;">Став лайк!</div>
			<div style="font-size: 25px;">І коментар напиши!</div>
		</div>
	</div>
</div>

Звичайний текст (успадковує font-size: 16px;)

Привіт! Це Фрілансер по життю! (заданий font-size: 20px;)

Живи, а працюй у вільний час! (заданий font-size: 17.5px;)

Підписуйся! (успадковує font-size: 17.5px;)

Став лайк! (заданий font-size: 14.7px;)

І коментар напиши! (заданий font-size: 25px;)

width: 200px;
height: 200px;
padding: 15px;

Переваги

Чіткість, зрозумілість, простота використання.
Підходить для початківців.

Недоліки

Порівняно з іншими, відносними одиницями це ускладнює нам роботу під час адаптування, а також знижує доступність нашої верстки, забороняючи користувачеві змінювати налаштування в браузері.

EM - відносна до розміру шрифту

Відносна одиниця. Розмір формується відносно поточного або успадкованого розміру шрифту (font-size).
1em дорівнює значенню font-size.
Як ми знаємо, властивість розміру шрифту font-size успадковується нащадками. Тому, вказуючи той чи інший розмір в EM, потрібно чітко розуміти, який розмір шрифту впливає на цей елемент.
Як і пікселі, значення EM можна вказувати дробові.

Приклади

( i ) Розмір шрифту браузера за замовчуванням 16px

( i ) Властивість font-size успадковується нащадками

<div>
	Звичайний текст
	<div style="font-size: 1em;">Привіт! Це Фрілансер по життю!
		<div style="font-size: 1.5em;">Живи, а працюй у вільний час!
			<div>Підписуйся!</div>
			<div style="font-size: 1.5em;">Став лайк!</div>
			<div style="font-size: 0.8em;">І коментар напиши!</div>
		</div>
	</div>
</div>

Звичайний текст (успадковує font-size: 16px;)

Привіт! Це Фрілансер по життю! (заданий font-size: 1em; 1*16=16px;)

Живи, а працюй у вільний час! (заданий font-size: 1.5em; 1.5*16 = 24px;)

Підписуйся! (успадковує font-size: 1.5em; 1.5*16 = 24px;)

Став лайк! (заданий font-size: 1.5em; 1.5*24 = 36px;)

І коментар напиши! (заданий font-size: 0.8em; 0.8*24=19.2px;)

Розмір шрифту
за замовчуванням 16px

width: 12.5em;
height: 12.5em;
padding: 0.9375em;

12.5 * 16 = 200px

0.9375 * 16 = 15px

Розмір шрифту
задано 20px (font-size: 20px;)

width: 12.5em;
height: 12.5em;
padding: 0.9375em;
font-size: 20px;

12.5 * 20 = 250px

0.9375 * 20 = 18.75px

Переваги

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

Недоліки

Порівняно з PX, працювати з EM складніше, адже для перенесення даних з макета в одиниці в EM потрібні обчислення.

REM - відносна до розміру шрифту браузера

Відносна одиниця. Розмір формується відносно розміру шрифту (font-size) у тезі або браузера за замовчуванням.
1rem дорівнює значенню font-size у тезі або браузера за замовчуванням.
Можна вказувати дробові числа, наприклад 1.5rem.

Приклади

( i ) Розмір шрифту браузера за замовчуванням 16px

( i ) Властивість font-size успадковується нащадками

<div>
	Звичайний текст
	<div style="font-size: 1rem;">Привіт! Це Фрілансер по життю!
		<div style="font-size: 1.5rem;">Живи, а працюй у вільний час!
			<div>Підписуйся!</div>
			<div style="font-size: 1.5rem;">Став лайк!</div>
			<div style="font-size: 0.8rem;">І коментар напиши!</div>
		</div>
	</div>
</div>

Звичайний текст (успадковує font-size: 16px;)

Привіт! Це Фрілансер по життю! (заданий font-size: 1rem; 1*16=16px;)

Живи, а працюй у вільний час! (заданий font-size: 1.5rem; 1.5*16 = 24px;)

Підписуйся! (успадковує font-size: 1.5rem; 1.5*16 = 24px;)

Став лайк! (заданий font-size: 1.5rem; 1.5*16 = 24px;)

І коментар напиши! (заданий font-size: 0.8rem; 0.8*16=12.8px;)

Розмір шрифту
за замовчуванням 16px

width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;

12.5 * 16 = 200px

0.9375 * 16 = 15px

Розмір шрифту
задано 20px (font-size: 20px;)

width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;
font-size: 20px;

12.5 * 16 = 200px

0.9375 * 16 = 15px

Переваги

Відносність REM дає змогу на порядок зменшити кількість дій під час адаптивної верстки. Не обмежує користувача в налаштуваннях браузера. Більш просте використання. Дуже добре підходить для зазначення розмірів шрифтів.

Недоліки

Порівняно з PX, працювати з REM складніше, адже для перенесення даних з макета в одиниці в REM потрібні обчислення, але простіше ніж з EM.

% - відсотки від ...

Відносна одиниця. Можна вказувати дробові числа, наприклад 10.5%. Різні CSS властивості обчислюють відсоток відносно різних значень:
Ширина width - відносно ширини батьківського елемента.
Висота height - відносно висоти батьківського елемента, але тільки якщо в нього задана висота або це флекс чи грід елемент.
При відносному позиціонуванні (position: relative; + top left bottom right) потрібні ті самі умови.
Для абсолютно позиціонованих об'єктів - щодо висоти батьківського елемента. При цьому, задавати висоту батькові не обов'язково.
Відступи padding \ margin - щодо ширини батьківського елемента, навіть якщо задаються вертикальні відступи.
transform: translate(x, y) - щодо ширини \ висоти самого об'єкта, до якого застосовано властивість.
font-size і line-height - щодо розміру властивості font-size.

Приклади

( i ) Розмір шрифту браузера за замовчуванням 16px

( i ) Властивість font-size успадковується нащадками

<div>
	Звичайний текст
	<div style="font-size: 100%;">Привіт! Це Фрілансер по життю!
		<div style="font-size: 150%;">Живи, а працюй у вільний час!
			<div>Підписуйся!</div>
			<div style="font-size: 150%;">Став лайк!</div>
			<div style="font-size: 80%;">І коментар напиши!</div>
		</div>
	</div>
</div>

Звичайний текст (успадковує font-size: 16px;)

Привіт! Це Фрілансер по життю! (заданий font-size: 100%; 16/100*100 = 16px;)

Живи, а працюй у вільний час! (заданий font-size: 150%; 16/100*150 = 24px;)

Підписуйся! (успадковує font-size: 150%; 16/100*150 = 24px;)

Став лайк! (заданий font-size: 150%; 24/100*150 = 36px;)

І коментар напиши! (заданий font-size: 80%; 24/100*80 = 19.2px;)

Висота батька 300px, ширина 300px
(height: 300px; width: 300px;)

width: 70%;
height: 50%;
padding: 5%;
transform: translate(10%, 5%);

Ширина: 300/100*70 = 210px

Висота: 300/100*50 = 150px

Внутрішні відступи: 300/100*5 = 15px

Вправо: 210/100*10 = 21px

Вниз: 150/100*5 = 7.5px

Висота батька 300px, ширина 300px
(height: 300px; width: 300px;)

width: 50%;
height: 50%;
padding: 5%;
margin: 5%;

Ширина: 300/100*50 = 150px

Висота: 300/100*50 = 150px

Внутрішні відступи: 300/100*5 = 15px

Зовнішні відступи: 300/100*5 = 15px

Висота батька 300px, ширина 300px
(height: 300px; width: 300px;)

width: 50%;
height: 70%;
padding: 5%;
position: relative;
left: 10%;
top: 5%;

Ширина: 300/100*50 = 150px

Висота: 300/100*70 = 210px

Внутрішні відступи: 300/100*5 = 15px

Вправо: 300/100*10 = 30px

Вниз: 300/100*5 = 15px

Переваги

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

Недоліки

Вимагають хорошого знання теорії та чіткого розуміння - відсоток від чого обчислюється в той чи інший момент.

VW, VH, VMIN, VMAX - щодо вікна (в'юпорта) браузера

Усі вони так чи інакше працюють щодо вікна браузера, так званого в'юпорта.
Вьюпорт, простими словами, це ось ця рамка через яку ми переглядаємо сайт.
Отже VW працює відносно ширини в'юпорта, VH відносно висоти в'юпорта.
VMIN - щодо найменшого значення з (VW, VH). VMAX - відносно найбільшого значення з (VW, VH).
100vw дорівнює ширині вікна браузера (в'юпорта), 100vh дорівнює висоті вікна браузера (в'юпорта).
100wmin дорівнює найменшому з (vw, vh), 100vmax дорівнює найбільшому з (vw, vh).

Приклади

( i ) Розмір шрифту браузера за замовчуванням 16px

( i ) Властивість font-size успадковується нащадками

<div>
	Звичайний текст
	<div style="font-size: 1.5vw;">Привіт! Це Фрілансер по життю!
		<div style="font-size: 1.5vmax;">Живи, а працюй у вільний час!
			<div style="font-size: 2.5vmin;">Підписуйся</div>
			<div style="font-size: 1.8vh;">Став лайк!</div>
		</div>
		<div>І коментар напиши!</div>
	</div>
</div>

Звичайний текст (успадковує font-size: 16px;)

Привіт! Це Фрілансер по життю! (заданий font-size: 1.5vw;)

Живи, а працюй у вільний час! (заданий font-size: 1.5vmax;)

Підписуйся! (заданий font-size: 2.5vmin;)

Став лайк! (заданий font-size: 1.8vh;)

І коментар напиши! (успадковує font-size: 1.5vw;)

width: 45vw;
height: 15vh;
padding: 1vmax;

Переваги

Відносність VW, VH, VMIN, VMAX дає змогу на порядок зменшити кількість дій під час адаптивної верстки. Не обмежує користувача в налаштуваннях браузера. Можна прив'язатися до розмірів в'юпорта, що дає змогу будувати чуйні властивості.

Недоліки

Складність у використанні. Потрібно володіти хорошими знаннями адаптивної верстки і можливостей CSS. На мобільних пристроях, під час роботи на всю висоту в'юпорта (100vh), потрібні додаткові дії на JS.

FR, EX, CH, MM, CM, PT, PC - інші одиниці

FR - одиниця виміру в модулі GRID. Вказує, яку частину (фрагмент) повинен займати той чи інший грід-елемент. Значення можуть бути дробовими, наприклад 0.5fr. Відмінно працює з відступами gap.
EX - одиниця, що працює відносно розміру латинського символу "x" (прописна). Використовується рідко.
CH - одиниця працює відносно розміру символу "0" (нуль). Використовується рідко.
Одиниці MM, CM, PT, PC є похідними від пікселя і вже не використовуються.

Формули конвертації значень із PX у відносні одиниці

з PX в EM - значення в PX поділити на значення font-size (поточне або успадковане).
з PX в REM - значення в PX поділити на значення font-size вказане для тега HTML (якщо не вказано, то на 16).
з PX у % - значення в PX поділити на значення відносно якого вираховується відсоток і помножити на 100.

Повернутися назад