Перейти до основного вмісту
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 grid — доріжки, одиниці та проміжки — та скопіюйте згенеровані CSS і HTML.

Спробувати

Часті запитання