Перайсці да асноўнага зместу
LibraTool logoLibraTool

Канвертар Pixel у REM — бясплатна

Канвертуйце паміж px, rem, em, pt, vw, vh і % з наладжвальным базавым памерам шрыфту. Уключае даведачную табліцу для агульных памераў у пікселях.

Працуе афлайн пасля загрузкі
1rem

Кантэкст (уплывае на rem/em/vw/vh/%)

Усе пераўтварэнні для 16 px

Бліжайшыя токены 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. 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.

Паспрабуйце

Часта задаюць пытанні