Към основното съдържание
LibraTool logoLibraTool

Конвертор от пиксели към REM — безплатно

Конвертирайте между px, rem, em, pt, vw, vh и % с конфигурируем базов размер на шрифта. Включва справочна таблица за общи размери в пиксели.

Работи офлайн след зареждане
1rem

Контекст (влияе на rem/em/vw/vh/%)

Всички конверсии за 16 px

Най-близки Tailwind токени (при 16px корен)

Чести размери в пиксели → 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. 1
    Задайте вашите контекстни стойности
    Преди преобразуване конфигурирате четирите числа, които правят относителните CSS единици смислени: основен размер на шрифта (по подразбиране 16px, стандартно за браузъра), размер на шрифта на родителския елемент (за преобразувания на em и %) и ширина и височина на прозореца (за vw и vh). Това са същите стойности, които браузърът ви би използвал при разрешаване на CSS по време на изпълнение.
  2. 2
    Пикселът като универсален посредник
    Конверторът първо извиква toPixels(), за да нормализира входа ви до брой сурови пиксели — например 1.5rem става 1.5 × baseFontPx, а 50vw става 0.5 × vpWidth. След това fromPixels() разделя този брой пиксели на подходящия коефициент за целевата единица. Всичките седем единици се показват едновременно в таблицата за преобразуване.
  3. 3
    Търсене на най-близкия токен на Tailwind
    След преобразуване инструментът изчислява стойността в rem и сканира две твърдо кодирани справочни таблици — тринадесетте токена за размер на шрифта на Tailwind (от text-xs до text-9xl) и неговата скала за разстояние — намирайки най-близкото съвпадение по абсолютно разстояние. Знак = означава, че стойността е точен токен; ≈ означава, че е най-близкото приближение.
  4. 4
    Групово презаписване на CSS чрез регулярен израз
    Панелът за поставяне на CSS приема суров CSS текст и прилага заместване с регулярен израз: в режим px→rem съвпада с всеки токен px и заменя числовата част с value/baseFontPx + rem; в режим rem→px прави обратното. Броят на замените се показва, така че можете да проверите колко стойности са презаписани.

Свързани инструменти

📏

Конвертор на мерни единици

Конвертирайте между единици за дължина, тегло, температура, площ, обем и др.

Опитайте
📐

Генератор на CSS clamp()

Генерирайте течна CSS clamp() стойност за адаптивна типография и разстояния. Задайте минимален/максимален размер и диапазон на изгледния прозорец, вижте жив преглед и копирайте CSS на един ред.

Опитайте
🟦

CSS Grid генератор

Визуално проектирайте CSS мрежа — записи, единици и празнини — и копирайте генерирания CSS и HTML.

Опитайте

Често задавани въпроси