Одиниці вимірювання

В сучасній мові CSS понад півтисячі властивостей. Значна їхня частина — чисельні. Ширина та висота елементу, зовнішні відступи, внутрішні, межі тощо. Тому треба вміти задавати ці значення у різних одиницях вимірювання.

Є абсолютні та відносні одиниці вимірювання.

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

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

Пікселі (px)

Пікселі (px) - це абсолютна одиниця вимірювання, яка використовується для задання розмірів елементів на веб-сайті. Вона становить один піксель на екрані пристрою. Оскільки пікселі є конкретними фізичними одиницями, їх використання зазвичай дає точні результати для розмірів та відстаней на екрані.

Щоправда, сучасні екрани мають більшу щільність пікселів на квадратний дюйм. Тому вони з кращою якістю відтворюють зображення. Утім для таких екранів розмір пікселя у верстці розраховується трохи інакше - відносно пікселя реального пристрою. Скажімо, якщо щільність пікселів збільшена в 4 рази, то один піксель у верстці буде відповідати 4 пікселям - квадрату пікселів 2Х2. Докладніше це буде розібрано у розділі з адаптації графіки для екранів підвищеної чіткості зображень.

Наприклад, можна встановити ширину елемента <div> на 200 пікселів:

div {
  width: 200px;
}

Використання пікселів особливо корисне для фіксованих розмірів, коли ви хочете, щоб елемент мав конкретні фізичні розміри незалежно від розміру екрана користувача. Однак використання пікселів для великих текстових блоків або макетів може призвести до проблеми низької доступності та нееластичних макетів на пристроях із великими або дуже малими екранами.

На практиці з абсолютних одиниць вимірювання піксель ймовірно використовують майже у 100 відсотках випадків.

Сантиметри (cm) та міліметри (mm)

Сантиметри (cm) та міліметри (mm) — це одиниці вимірювання, які зручно застосовувати під час роботи з таблицями стилів для друкованих матеріалів. У випадку застосування для екранів, 1 сантиметр = 96 пікселів / 2.54, (прибл. 37.8px) а 1 міліметр, відповідно, 1/10 сантиметра (прибл. 3.78px).

Дюйми (in), Пункти (pt) та Піки (pc)

Дюйми (in) — одиниця вимірювання, поширена на теренах США. 1 дюйм = 2.54 сантиметра, а у випадку екранів — 96 пікселів.

Пункти (pt) — 1/72 дюйма.

Піки (pc) — одна шоста дюйма або 12 пунктів.

На практиці абсолютні одиниці вимірювання крім пікселів використовуються дуже рідко.

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

Ем (em)

em - це відносна одиниця вимірювання в CSS, яка вказує розмір тексту або елемента відносно розміру шрифту його батьківського елемента. Це означає, що 1 em дорівнює розміру шрифту батьківського елемента.

Наприклад розмір шрифту батьківського елемента (наприклад, <body>) дорівнює 16 пікселів. Якщо встановити розмір тексту дочірнього елемента у 2em, то розмір цього тексту буде 32 пікселі (16 пікселів * 2).

body {
  font-size: 16px; /* розмір шрифту батьківського елемента */
}

p {
  font-size: 2em; /* розмір тексту дочірнього елемента у відносних одиницях em */
  /* Таким чином, розмір цього тексту буде 32 пікселі (16 пікселів * 2) */
}

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

Рем (rem)

rem - це відносна одиниця вимірювання, яка вказує розмір тексту або елемента відносно розміру шрифту кореневого (зазвичай <html>) елемента. Термін "rem" походить від "root em", що означає, що вони вимірюються відносно кореневого (найвищого) елемента сторінки, який зазвичай є <html> елементом.

Одиниця rem особливо корисна для створення адаптивних і гнучких макетів, оскільки вона не залежить від розміру шрифту батьківського елемента, як em, але від розміру шрифту кореневого елемента. Це дозволяє створювати єдність у розмірах шрифтів для всього веб-сайту.

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* розмір тексту буде 24px (16px * 1.5) */
}

Відсотки (%)

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

Ось деякі способи використання відсотків:

Ширина та висота

.container {
  width: 80%; /* Ширина контейнера буде 80% від розміру його батьківського елемента */
  height: 50%; /* Висота контейнера буде 50% від розміру його батьківського елемента */
}

Відступи

.element {
  margin-left: 10%; /* Відступ зліва буде 10% від розміру його батьківського елемента */
  padding-top: 5%; /* Відступ зверху буде 5% від розміру його батьківського елемента */
}

Розміри тексту

.text {
  font-size: 120%; /* Розмір тексту буде 120% від розміру шрифту його батьківського елемента */
}

Положення

.positioned-element {
  position: relative;
  left: 20%; /* Елемент зсунеться вліво на 20% від ширини його батьківського елемента */
}

Flexbox та Grid

Відсотки часто використовуються для задання гнучких розмірів елементів в контейнерах, які використовують Flexbox або CSS Grid Layout.

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1; /* Елементи займуть рівні частини контейнера */
}

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

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

ch (character)

ch (читається як «сі-ейч», від англійського «character» — «літера», «символ») - це відносна одиниця вимірювання в CSS, яка являє собою ширину символу "0" в поточному шрифті. Таким чином, якщо встановити ширину елемента в 10ch, то він буде ширший за 10 символів "0" в поточному шрифті.

Одиниця ch особливо корисна для створення адаптивних макетів, оскільки вона залежить від розміру шрифту, і це можна використовувати для визначення розмірів елементів, які можуть вміщати певну кількість символів.

Наприклад, якщо треба зробити поле вводу, яке має ширину, яка відповідає 20 символам "0" у поточному шрифті:

input[type="text"] {
  width: 20ch;
}

У ролі вихідної величини може бути використана висота цифри 0, в залежності від напрямку написання тексту. Так, для традиційних для нас горизонтальних мов написання текстів використовується ширина, натомість для деяких східних мов буде використана висота.

ex

ex (читається «екс») — одиниця вимірювання, що в ролі вихідної величини використовує висоту латинської літери x. В більшості випадків, відповідає висоті рядкових літер шрифту.

Ця одиниця корисна для створення адаптивних макетів, особливо в контексті вертикальних відстаней.

Наприклад, якщо ви хочете задати вертикальний відступ між рядками тексту, який відповідає висоті літери "x", ви можете використовувати 1ex:

p {
  /* Відстань між рядками буде 1,5 рази вище відстані, яка відповідає висоті літери "x" */
  line-height: 1.5ex;
}

vw (viewport width)

vw (читається як «ві-дабл’ю», від англійського «viewport width» — «ширина вікна перегляду») - це відносна одиниця вимірювання, яка вказує відсоток від ширини вікна перегляду (viewport width). Одна одиниця vw дорівнює 1% ширини вікна перегляду. Це означає, що 50vw відповідає половині ширини вікна, 100vw - повній ширині вікна, і так далі.

Одиниці vw особливо корисні для створення адаптивних і респонсивних (резинових) макетів, оскільки вони дозволяють встановлювати розміри елементів відсотково відносно ширини вьюпорту користувача.

Наприклад, якщо ви хочете створити блок, що займає половину ширини вікна перегляду, ви можете використовувати 50vw:

div {
  width: 50vw; /* Ширина блоку буде 50% від ширини вікна перегляду */
}

Важливо пам'ятати, що vw вимірюється відносно ширини вікна перегляду, і використовується горизонтально. Це означає, що при зміні ширини вікна перегляду, значення vw також змінюється, що може призвести до адаптивності дизайну.

vh (viewport height)

vh (читається як «ві-ейч», від англійського «viewport height» — «висота вікна перегляду») - це одиниця вимірювання в CSS, яка вказує відсоток висоти вікна перегляду (viewport height). Тобто 1 vh дорівнює 1% висоти вікна перегляду користувача. Відповідно 100vh - це вся висота вікна перегляду.

Ця одиниця вимірювання дуже корисна для створення адаптивних та респонсивних макетів, які залежать від висоти вікна перегляду. Наприклад, якщо ви хочете, щоб елемент займав 50% висоти вікна перегляду:

.element {
  height: 50vh; /* Висота елемента буде 50% від висоти вікна перегляду */
}

vmin (viewport minimum)

vmin (читається «ві-мін», від англійського «viewport minimum» — «мінімум вікна перегляду») - це одиниця вимірювання в CSS, яка представляє собою менший відсоток з двох: ширини та висоти вікна перегляду (viewport width та viewport height). Одиниця vmin використовує менший з двох розмірів (ширина чи висота) і відображає відсоток цього розміру.

Наприклад, якщо ширина вікна перегляду користувача - 1000 пікселів, а висота - 800 пікселів, то 1 vmin буде дорівнювати 8 пікселям (бо 1% від 800 пікселів).

Наприклад, якщо ви хочете, щоб елемент займав 50% від меншого з двох розмірів вікна перегляду:

.element {
  width: 50vmin; /* Ширина елемента буде 50% від меншого з двох розмірів вікна перегляду */
  height: 50vmin; /* Висота елемента також буде 50% від меншого розміру вікна перегляду */
}

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

vmax (viewport maximum)

vmax (читається «ві-макс», від англійського «viewport maximum» — «максимум вікна перегляду») - це одиниця вимірювання в CSS, яка представляє собою більший відсоток з двох: ширини чи висоти вікна перегляду (viewport width або viewport height). Одиниця vmax використовує більший з двох розмірів (ширина чи висота) і відображає відсоток цього розміру.

Наприклад, якщо ширина вікна перегляду користувача - 1000 пікселів, а висота - 800 пікселів, то 1 vmax буде дорівнювати 10 пікселям (бо 1% від 1000 пікселів).

Наприклад, якщо ви хочете, щоб елемент займав 50% від більшого з двох розмірів вікна перегляду:

.element {
  width: 50vmax; /* Ширина елемента буде 50% від більшого з двох розмірів вікна перегляду */
  height: 50vmax; /* Висота елемента також буде 50% від більшого розміру вікна перегляду */
}

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

PreviousCSS-змінні NextСтилізація тексту

Last updated 1 year ago