Одиниці
Багато властивості CSS подобається width
, margin
, padding
, і font-size
т.д. прийняти довжину. CSS має спосіб виразити довжину в декількох одиницях. Довжина - це комбінація числа та одиниці без пробілів. Наприклад 5px
, 0.9em
тощо.
Довжина
Одиниці загальної довжини
Існує кілька одиниць, що використовуються CSS для вираження довжини. Старіші, які підтримуються всіма браузерами, це:
- rem - “r” означає “root”: “root em” -, що дорівнює розміру шрифту, зафіксованому на кореневому елементі (майже завжди
).
- vh та vw - Багато прийомів адаптивного веб-дизайну значною мірою покладаються на правила відсотків. Однак відсоткові показники CSS не завжди є найкращим рішенням для всіх проблем. Міра vh дорівнює 1/100 висоти області перегляду. Так, наприклад, якщо висота браузера становить 800 пікселів, 1vh дорівнює 8px, і, аналогічно, якщо ширина області перегляду становить 650px, 1vw еквівалентна 6.5px.
- Vmin і Vmax - Ці одиниці пов'язані з максимальним або мінімальним значенням ОГО і VW . Наприклад, якби для браузера було встановлено ширину 1200 пікс. Та висоту 600 пікс., 1vmin буде 6px, а 1vmax - 12px. Однак, якщо ширину встановити на 700px, а висоту встановити на 1080px, vmin дорівнює 7px, а vmax - 10.8px.
- ex і ch - ці одиниці, подібно до em і rem , покладаються на поточний шрифт та розмір шрифту. Однак, на відміну від em і rem , ці одиниці також покладаються,
font-family
оскільки вони визначаються на основі заходів, характерних для кожного шрифту. Ч одиниця ( «символ одиниця») визначається як ширина символу нуль ( «0»). Ех одиниця визначаються як «поточні х висоти поточного шрифту або половини 1em». Висота-х даного шрифту - це висота нижнього регістру "х" цього шрифту. Часто це середня позначка шрифту.

Існує два загальних типи одиниць, що використовуються для довжини та розміру в CSS: відносна та абсолютна.
Відносні одиниці
Відносні одиниці змінюються відносно поточного розміру шрифту та інших параметрів елемента. Деякі відносні одиниці є
em
- ширина великої літери M
font-size
поточного елемента. - Розміри шрифтів успадковуються від батьківських елементів.
Приклад:
div { font-size: 16px; } div h3 { font-size: 2rem; }
Ось
буде рівним, 32px
оскільки font-size
поточний або батьківський елемент дорівнює 16px
.
rem
- корінь
em
або ширина великої літери М основи за замовчуваннямfont-size
. - Батьківські розміри шрифтів не вплинуть.
Приклад:
body { font-size: 16px; } p { font-size: 1.5rem; }
Ось
буде рівним, 24px
оскільки базовою базою за замовчуванням font-size
є 16px
.
%
- відсоток розміру щодо розміру батьків.
Приклад:
div { width: 400px; } div p { width: 75%; }
Оскільки батьківська ширина дорівнює 400px
, ширина внутрішнього абзацу буде 300px
, або 75% 400px
.
vw
- ширина перегляду або 1/100 від ширини області перегляду
Приклад:
body { width: 100vw; }
body
Заповнення ширина вікна перегляду, незалежно від того , що є 417px, 690px, або будь-якої ширини.
vh
- висота перегляду або 1/100 від висоти вікна перегляду
Приклад:
div { height: 50vh; }
Це div
заповнить половину висоти області перегляду, будь то 1080px, 1300px або будь-яка висота.
Абсолютні одиниці
Абсолютні одиниці будуть однаковими незалежно від розміру екрана чи інших налаштувань. Деякі абсолютні одиниці є
px
- піксель
- кількість пікселів залежить від якості екрану пристрою перегляду
in
, cm
,mm
- дюйм, сантиметр, міліметр
- Дюйм - це дюйм на маленькому або великому екрані
pt
, pc
- очок (1/72 дюйма) та пікасів (12 очок)
Приклад
p { font-size: 24px; } div { width: 3in; border-width: 3pt; }
Абзац із font-size: 24px
символом відображатиметься як 24 пікселі на екрані телефону, планшета чи робочого столу.
Відображення div
відображатиметься як 3 дюйми в ширину, а border
на екрані div
буде товщиною 3/72 дюйма, незалежно від розміру екрану.