Конвертер CSS-единиц — px, rem, em, vw, vh
Перевод между px, rem, em, vw, vh и %. Укажите размер корневого шрифта и ширину viewport — rem и viewport-единицы совпадут с вашей дизайн-системой.
rem — от корневого шрифта; vw и % — от ширины viewport.
В макете часто px, в коде rem — эта страница связывает их без калькулятора.
vw и vh зависят от ширины экрана — укажите breakpoint, под который верстаете.
Как конвертировать
- Введите число и выберите единицы «из» и «в»
- Проверьте корневой шрифт и ширину viewport
- Скопируйте результат в CSS
Зачем это нужно
- Меньше ошибок с rem, когда корень не 16.
- Быстро понять, сколько px в 40vw на макете ноутбука.
- Без аккаунта — вставил и готово.
Сценарии
- Отступы px из Figma → rem в CSS
- Проверить 40vw на макете ноутбука
- Объяснить rem и em на живых числах
Советы
- em здесь для простоты равен корню; поправьте, если у компонента другой font-size.
- Туда-обратно могут всплыть мелкие дроби — в CSS четыре знака обычно не нужны.
Примеры
| Ввод | Вывод | Примечание |
|---|---|---|
| 16px → rem (корень 16) | 1rem | — |
| 50vw при ширине 1280px | 640px | — |
Частые вопросы
- От чего считается rem?
- От корневого размера шрифта здесь (обычно 16px). Поменяйте, если у html { font-size } другое значение.
- % то же самое, что vw?
- Не всегда. Здесь % использует ту же опорную ширину, что и поле viewport — это приближение к ширине контейнера.