Одиниці розміру в CSS (px rem em vh)
Для типографіки інтерфейсу віддавайте перевагу rem; px використовуйте лише для тонких ліній і деталей, що потребують піксельної точності.
| Одиниця | Відносно чого | Типове застосування |
|---|---|---|
| px | Device pixel (CSS pixel) | Borders, precise icons |
| rem | Root element font-size | Type scale, spacing |
| em | Parent font-size | Component-local sizing |
| % | Parent property | Widths, flexible layouts |
| vw | 1% viewport width | Full-bleed sections |
| vh | 1% viewport height | Hero height (mind mobile UI) |
| vmin / vmax | Smaller/larger viewport side | Square-ish responsive sizing |
| ch | Width of “0” glyph | Code blocks, monospace fields |
| ex | x-height of font | Rare fine typography |
| svh / lvh / dvh | Small/large/dynamic viewport | Mobile browser chrome-safe height |
Примітки
- На мобільних 100vh може включати приховані елементи інтерфейсу браузера — за підтримки віддавайте перевагу dvh/svh.
- Користувацький розмір шрифту впливає на rem — для доступності це зазвичай бажано.
Часті запитання
- Скільки пікселів в 1rem?
- 1rem дорівнює розміру шрифту кореневого елемента, тож за замовчуванням браузера 16 px це буде 16 px.
- У чому різниця між em і rem?
- rem завжди відносний до розміру шрифту кореневого елемента, а em — до успадкованого розміру шрифту поточного елемента.
- Чому 100vh не працює на мобільних?
- Мобільні браузери можуть показувати або ховати панелі інтерфейсу, тож 100vh може бути вищим за видиму область; за підтримки використовуйте dvh або svh.