Конвертер пикселей в REM — бесплатно
Конвертируйте между px, rem, em, pt, vw, vh и % с настраиваемым базовым размером шрифта. Включает справочную таблицу для распространённых размеров в пикселях.
Контекст (влияет на rem/em/vw/vh/%)
Ближайшие токены Tailwind (при 16px корне)
Распространённые размеры px → rem (база 16px)
Преобразовать вставленный CSS
Частые применения
- PX в REM для веб-разработкиКонвертируйте значения пикселей в единицы rem для масштабируемого, доступного CSS. Установите размер шрифта базовой и мгновенно увидите все эквивалентные значения.
- Единицы CSS для адаптивного дизайнаКонвертируйте между px, vw, vh и%, чтобы построить макеты, которые правильно реагируют на разные размеры и ориентацию экрана.
- Конвертируйте спецификации дизайна в единицы CSSПереводите значения пикселей Figma или Sketch в единицы rem/em для чистой, масштабируемой реализации CSS.
- Справка по единицам Tailwind CSSПоймите, как классы размера Tailwind CSS соответствуют значениям пикселей и rem для точной реализации.
- Конвертируйте единицы CSS для таблиц стилей печатиКонвертируйте между px, pt и rem для запросов медиа печати и вывода CSS PDF.
Как это работает
Все конвертации полностью работают в вашем браузере с использованием написанного вручную арифметического движка без зависимостей. Инструмент конвертирует между семью единицами CSS (px, rem, em, pt, vw, vh и %), направляя каждый расчёт через пиксели как общую базу, применяя простое деление или умножение к настроенному вами размеру корневого шрифта, размеру родительского шрифта или размерам окна просмотра.
- 1Установите ваши контекстные значенияПеред конвертацией вы настраиваете четыре числа, которые делают относительные единицы CSS значимыми: размер корневого шрифта (по умолчанию 16px, что является умолчанием браузера), размер шрифта родительского элемента (для конвертаций em и %), и ширину и высоту окна просмотра (для vw и vh). Это те же значения, которые ваш браузер использовал бы при разрешении CSS во время выполнения.
- 2Пиксель как универсальный посредникКонвертер сначала вызывает toPixels(), чтобы нормализовать ваш ввод в необработанное количество пикселей — например, 1,5rem становится 1,5 × baseFontPx, а 50vw становится 0,5 × vpWidth. Затем fromPixels() делит это количество пикселей на соответствующий коэффициент для целевой единицы. Все семь единиц показываются одновременно в таблице конвертации.
- 3Поиск ближайшего токена TailwindПосле конвертации инструмент вычисляет значение rem и сканирует две жёстко закодированные справочные таблицы — тринадцать токенов размера шрифта Tailwind (text-xs до text-9xl) и его шкалу интервалов — находя ближайшее совпадение по абсолютному расстоянию. Знак = означает, что значение — точный токен; ≈ означает, что это ближайшее приближение.
- 4Пакетное переписывание CSS через регулярное выражениеПанель вставки CSS принимает необработанный текст CSS и применяет замену регулярного выражения: в режиме px→rem она сопоставляет каждый токен px и заменяет числовую часть на value/baseFontPx + rem; в режиме rem→px она делает обратное. Показывается количество замен, чтобы вы могли проверить, сколько значений было переписано.
Похожие инструменты
Конвертер единиц
Конвертируйте единицы длины, веса, температуры, площади, объёма и других.
Генератор CSS clamp()
Генерируйте адаптивные значения CSS clamp() для отзывчивой типографики и отступов. Задайте минимальный/максимальный размер и диапазон вьюпорта, предпросматривайте результат и копируйте однострочный CSS.
Генератор CSS Grid
Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.