01
Разделите четыре опоры
rem зависит от корневого шрифта, em — от заданного родительского. vw и vh используют введённые ширину и высоту экрана, а не размер текущей вкладки.
HTML / CSS / фронтенд-код
конвертер единиц CSSОт пикселей к проверяемым адаптивным значениям
Введите длину или переключитесь на clamp, calc и соотношение сторон.
конвертер единиц CSS
Ввод
Значения вычисляются в браузере и не отправляются на сервер.
Результат
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vhПараметры
Расчёт готов.
В макете указано 24px, а в стилях нужны rem или vw. Конвертер единиц CSS просит указать размер корневого шрифта для rem, родительского для em и размеры области просмотра для vw и vh: без этих данных результат неоднозначен.
Перевод px в rem — лишь одна часть задачи. Калькулятор CSS clamp строит плавный размер по двум точкам, а перевод vw vh использует те же размеры экрана. Конвертер единиц CSS сохраняет контекст и для вычисления поддерживаемых выражений calc().
Зачем нужен конвертер единиц CSS?
Основание относительной величины остаётся видимым.
Пять единиц для одной длины
Конвертер единиц CSS одновременно выводит px, rem, em, vw и vh. Измените только корневой шрифт — поменяется rem; измените родительский — поменяется em. Это расчёт для введённых параметров, а не считывание стилей чужой страницы.
Проверка плавного участка clamp()
Задайте две ширины экрана и размеры в этих точках. Инструмент выведет коэффициент vw; на ширине 768px можно проверить, лежит ли значение на прямой или уже упёрлось в предел.
Проверьте контекст перед копированием
02
Управляйте обновлением
Автоматический режим ждёт 350 мс после изменения. Если его выключить, расчёт запускается по Ctrl/Cmd+Enter; устаревший результат нельзя скопировать.
03
Проверьте промежуточную ширину
Для clamp() сравните значение внутри диапазона с обеими крайними точками. Для пропорций проверьте сокращённое отношение и высоту для выбранной ширины.
Четыре расчёта с общими настройками
Таблица пяти единиц
Введите длину в px, rem, em, vw или vh и получите все эквиваленты. Число без суффикса считается пикселями.
Генератор clamp()
Две ширины и два размера задают линейную формулу. Границы можно вывести в rem или px и проверить значение при выбранной ширине.
Ограниченный расчёт calc()
Пять единиц длины, скобки и базовая арифметика вычисляются в px. Складывать можно длины, а умножать и делить — только на безразмерное число.
Расчёт пропорций
Целые размеры сокращаются до отношения сторон; выводятся CSS aspect-ratio и высота для заданной целевой ширины.
Где заканчивается область расчёта
- Относительным единицам нужна опора
- Конвертер единиц CSS не читает вычисленные стили другого сайта. rem, em, vw и vh зависят от четырёх заданных здесь параметров.
- calc() поддерживается не целиком
- Проценты, var(), env(), неизвестные единицы и операции с несовместимыми размерностями отклоняются. Без данных о контейнере и каскаде точное значение px вывести нельзя.
- Опорные точки clamp() упорядочены
- Начальная ширина должна быть меньше конечной, а минимальный размер — не больше максимального. Отрицательный размер вызывает ошибку.
- Изображения не изменяются
- Исходные ширина и высота и целевая ширина должны быть положительными целыми числами. Результат — высота и CSS-отношение, без обрезки файла.
Вопросы про конвертер единиц CSS
Как перевести px в rem?
Разделите число пикселей на размер корневого шрифта. При 16px значение 24px равно 1,5rem; если в проекте другая основа, измените поле.
Чем em отличается от rem?
rem берёт размер шрифта корня документа, em — указанного родителя. Во вложенном компоненте em может измениться при неизменном rem.
Как пересчитать vw и vh в пиксели?
1vw равен одному проценту ширины области просмотра, 1vh — высоты. Задайте обе величины, затем пересчитайте через px.
Как рассчитать clamp() для адаптивного шрифта?
Укажите две ширины экрана и нужные размеры на них. Калькулятор найдёт коэффициент vw и покажет значение clamp() на промежуточной ширине.
Почему при другом корневом размере шрифта результат rem меняется?
Потому что rem зависит от указанного корневого шрифта. Введите значение своего проекта вместо стандартных 16px перед копированием результата.
Остались вопросы?
Открыть конвертер единиц CSS
Вернитесь к расчёту длины, проверьте выражение или создайте плавный размер с ограничениями.