Одиниці вимірювання в CSS: rem, em, px, vh, vw, %

У CSS існує безліч одиниць вимірювання, кожна з яких має свої особливості та використовується для різних завдань. В даній статті ми детально розглянемо такі одиниці: rem, em, px, vh, vw та %, розкриємо їх особливості та дослідимо, як їх використовувати для створення адаптивних та відзначених веб-сайтів.

Rem (Root EM):

Rem – це одиниця відносної висоти шрифту. Особливість rem полягає в тому, що вона відноситься до кореневого (html) елемента сторінки, тому змінюється тільки один раз, коли задається значення. Наприклад, якщо задати шрифт кореневому елементу сторінки 16px, то 1rem буде еквівалентно 16px. Якщо ви задаєте шрифт для дочірнього елементу (тегу) в батьківському елементі, вони будуть наслідувати значення rem, що дозволяє створювати легко масштабовані компоненти.

html {
  font-size: 16px; /* Задає розмір шрифту кореневого елемента у 16 пікселях */
}

p {
  font-size: 1.5rem; /* Задає розмір шрифту у 1.5 раза більше розміру шрифту кореневого елемента, тобто 24px (16px * 1.5) */
  margin-bottom: 1.2rem; /* Задає відступ знизу у 1.2 раза більше розміру шрифту кореневого елемента, тобто 19.2px (16px * 1.2) */
}

Em (Relative to Parent):

Em – це також одиниця відносної висоти шрифту, але вона вимірюється відносно батьківського елементу. Якщо ви задаєте розмір шрифту у батьківському елементі, всі дочірні елементи, що мають значення em, будуть використовувати його як основу. Якщо ніякий батьківський елемент не має заданого розміру шрифту, тоді em буде відноситись до шрифту документа (за замовчуванням 16px).

Px (Pixels):

Px – це абсолютна одиниця вимірювання, яка не залежить від жодного іншого елементу. Вона використовує фіксований розмір в пікселях. При використанні px, елементи завжди матимуть фіксований розмір, що може призводити до проблем з адаптивністю на різних екранах.

Vh (Viewport Height) та Vw (Viewport Width):

Vh та Vw – це відносні одиниці вимірювання, які залежать від висоти (vh) та ширини (vw) видимої області (viewport) браузера. Наприклад, 1vh відповідає 1% висоти видимої області, а 1vw – 1% ширини. Ці одиниці дозволяють створювати елементи, що адаптуються до розміру екрану користувача, що покращує взаємодію з веб-сайтом на різних пристроях.

Пликлад vh:

Пликлад vw:

% (Percentage):

% – це одиниця відносної величини, яка використовує відсотки від батьківського елементу. Наприклад, якщо ширина дочірнього елемента задана як 50%, це означає, що його ширина буде половина ширини батьківського елемента.

Приклад:

Висновок:

Використання правильних одиниць вимірювання в CSS допомагає створювати гнучкі, адаптивні та легко управляються компоненти для веб-сайтів. Rem та em дозволяють забезпечити зручний масштаб, px – точність, а vh, vw та % – адаптивність. Залежно від потреб вашого проекту, ви можете комбінувати ці одиниці, щоб створити привабливі та відзначені веб-інтерфейси для користувачів на будь-яких пристроях.

Відео по Одиницях Виміру в CSS ви можете подивитися у мене на каналі https://youtu.be/9iIahi1AyyQ