Конвертер CSS-единиц
Переводите между px, rem, em, %, vw, vh, pt, cm, mm, in с учётом параметров шрифта и viewport.
Визуальный preview
Таблица быстрого преобразования (px → другие единицы)
При базовом размере шрифта 16px и viewport 1920×1080
| px | rem | em | % | vw | vh | pt | cm | mm | in |
|---|---|---|---|---|---|---|---|---|---|
| 8 | 0.50 | 0.50 | 50.00 | 0.42 | 0.74 | 6.00 | 0.21 | 2.12 | 0.08 |
| 10 | 0.63 | 0.63 | 62.50 | 0.52 | 0.93 | 7.50 | 0.26 | 2.65 | 0.10 |
| 12 | 0.75 | 0.75 | 75.00 | 0.63 | 1.11 | 9.00 | 0.32 | 3.18 | 0.13 |
| 14 | 0.88 | 0.88 | 87.50 | 0.73 | 1.30 | 10.50 | 0.37 | 3.71 | 0.15 |
| 16 | 1.00 | 1.00 | 100.00 | 0.83 | 1.48 | 12.00 | 0.42 | 4.23 | 0.17 |
| 18 | 1.13 | 1.13 | 112.50 | 0.94 | 1.67 | 13.50 | 0.48 | 4.76 | 0.19 |
| 20 | 1.25 | 1.25 | 125.00 | 1.04 | 1.85 | 15.00 | 0.53 | 5.29 | 0.21 |
| 24 | 1.50 | 1.50 | 150.00 | 1.25 | 2.22 | 18.00 | 0.63 | 6.35 | 0.25 |
| 32 | 2.00 | 2.00 | 200.00 | 1.67 | 2.96 | 24.00 | 0.85 | 8.47 | 0.33 |
| 48 | 3.00 | 3.00 | 300.00 | 2.50 | 4.44 | 36.00 | 1.27 | 12.70 | 0.50 |
| 64 | 4.00 | 4.00 | 400.00 | 3.33 | 5.93 | 48.00 | 1.69 | 16.93 | 0.67 |
Когда использовать какую единицу
px — пиксели
Абсолютная единица. Идеально для бордеров, теней, точных размеров иконок. Никогда не увеличивается при масштабировании страницы.
rem — корневые em
Относительна к размеру шрифта корневого элемента (<html>). Идеальна для типографики, отступов, размеров компонентов. Позволяет масштабировать весь дизайн изменением одного значения.
em — элементные em
Относительна к размеру шрифта родителя. Полезна для вложенных компонентов, которые должны масштабироваться со своим контейнером. Может быть сложной в отладке при глубокой вложенности.
% — проценты
Относительна к родителю. Идеальна для ширины/высоты контейнеров, адаптивных лейаутов. Для font-size работает относительно шрифта родителя.
vw/vh — viewport-width/height
1vw = 1% ширины окна браузера, 1vh = 1% высоты. Идеальны для fullscreen элементов, адаптивного масштабирования. Требуют внимания: на мобильных vh может быть больше из-за адреса браузера.
pt — пункты (типография)
Используется в печати. 1 pt ≈ 1.33 px. На веб редко, но полезна для экспорта в PDF или при работе с типографским масштабом.
cm, mm, in — физические единицы
Сантиметры, миллиметры, дюймы. Редко используются на веб, но полезны для дизайна, который будет печататься или экспортироваться.