CSS-единицы измерения
Справочник CSS-единиц: px, rem, em, %, vw, vh, fr и когда какую единицу выбирать.
Короткий ответ
CSS-единицы бывают абсолютные, относительные, viewport-зависимые и grid-единицы; выбор влияет на адаптивность интерфейса.
Пикселиpx
абсолютная экранная единица
Шрифтrem / em
относительно размера шрифта
Viewportvw / vh
относительно окна браузера
Таблица значений
12 из 12
| Единица | Тип | Когда использовать |
|---|---|---|
| px | абсолютная | границы, иконки, точные размеры |
| rem | относительная | типографика и отступы от root font-size |
| em | относительная | размер от текущего элемента |
| % | относительная | ширины и пропорции |
| vw | viewport | часть ширины окна |
| vh | viewport | часть высоты окна |
| vmin | viewport | меньшая сторона окна |
| vmax | viewport | большая сторона окна |
| fr | grid | доля свободного места в CSS Grid |
| ch | типографика | ширина символа 0 |
| lh | типографика | высота строки элемента |
| dvh | dynamic viewport | динамическая высота окна на мобильных |
Как использовать
Справочник нужен для быстрой проверки параметра перед расчетом, заполнением документа или настройкой таблицы.
Если параметр влияет на деньги, налоги, сроки или ответственность, сверяйте период действия и источник перед применением результата.
Что проверить
- актуальную дату или период расчета
- регион, режим или категорию плательщика, если они влияют на значение
- исключения, льготы и специальные условия