| Единица | Сравните все единицы CSS, включая px, em, rem, vw, vh, fr и другие. Включает примеры, поддержку браузерами и когда использовать каждую единицу. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Единица | Сравните все единицы CSS, включая px, em, rem, vw, vh, fr и другие. Включает примеры, поддержку браузерами и когда использовать каждую единицу. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Единица | Сравните все единицы CSS, включая px, em, rem, vw, vh, fr и другие. Включает примеры, поддержку браузерами и когда использовать каждую единицу. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Единица | Сравните все единицы CSS, включая px, em, rem, vw, vh, fr и другие. Включает примеры, поддержку браузерами и когда использовать каждую единицу. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Единица | Сравните все единицы CSS, включая px, em, rem, vw, vh, fr и другие. Включает примеры, поддержку браузерами и когда использовать каждую единицу. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Масштабируется с размером шрифта :root, учитывает настройки браузера пользователя, согласованно по компонентам
Избегайте px — не учитывает настройки шрифта пользователя
rem для согласованных глобальных отступов; em для отступов относительно размера шрифта компонента
Избегайте px для компонентов, которые масштабируются
% для гибких контейнеров; ch (45–75ch) для оптимальной длины строки текста
Избегайте фиксированных px для ширины основного контента
dvh избегает перекрытия chrome мобильного браузера; vh подходит только для десктопа
Избегайте 100vh на мобильных — URL-бар обрезает контент
Пропорционально распределяет оставшееся пространство; чище, чем % в сетке
Избегайте наивного сочетания fr с фиксированными px-колонками
Пиксельно точный рендеринг; не нужно масштабировать с текстом
Здесь не нужны относительные единицы
Используйте rem для размеров шрифта. rem относится к размеру шрифта корневого элемента (обычно 16px), что упрощает масштабирование всего интерфейса изменением корневого размера шрифта. Это также уважает настройки размера шрифта браузера пользователя, улучшая доступность. Используйте px только для рамок, теней и элементов, которые не должны масштабироваться.
em относится к размеру шрифта родительского элемента, что может накапливаться в вложенных элементах. rem относится к размеру шрифта корневого элемента ('<'html>), что делает его более предсказуемым. Для размеров шрифта обычно предпочтительнее rem. em полезен для отступов и полей, которые должны масштабироваться вместе с размером шрифта компонента.
Используйте vw/vh для элементов, которые должны быть размером относительно viewport браузера (например, полноэкранные hero-секции, модальные окна). Используйте проценты для элементов, которые должны быть размером относительно их родительского контейнера. dvh (dynamic viewport height) предпочтительнее vh на мобильных устройствах, где адресная строка влияет на высоту.
Единицы container query (cqw, cqh, cqi, cqb) относятся к размеру элемента-контейнера, а не к viewport. Они требуют контекста контейнера (container-type: inline-size). Идеально подходят для по-настоящему адаптивных компонентов, которые должны адаптироваться к размеру своего контейнера независимо от размера viewport.