Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Pixel sa REM Converter

I-convert sa pagitan ng px, rem, em, pt, vw, vh, at % na may configurable na base font size. Kasama ang reference table para sa mga karaniwang laki ng pixel.

Gumagana offline kapag na-load na
1rem

Konteksto (nakakaapekto sa rem/em/vw/vh/%)

Lahat ng conversion para sa 16 px

Pinakamalapit na Tailwind tokens (sa 16px root)

Karaniwang laki ng pixel β†’ rem (sa 16px base)

I-convert ang na-paste na CSS

Mga karaniwang gamit

  • PX to REM para sa Web DevelopmentI-convert ang pixel value sa rem unit para sa scalable, accessible CSS. Itakda ang base font size at makita agad ang lahat ng katumbas na halaga.
  • CSS Unit para sa Responsive DesignI-convert ang px, vw, vh, at % upang bumuo ng layout na sumasagot nang tama sa iba't ibang screen size at orientation.
  • I-convert ang Design Spec sa CSS UnitI-translate ang Figma o Sketch pixel value sa rem/em unit para sa malinis, scalable CSS implementation.
  • Tailwind CSS Unit ReferenceMaintindihan kung paano ang Tailwind CSS sizing class ay naka-map sa pixel at rem value para sa tumpak na implementation.
  • I-convert ang CSS Unit para sa Print StylesheetI-convert ang px, pt, at rem para sa print media query at PDF output CSS.

Paano ito Gumagana

Buong tumatakbo sa iyong browser ang lahat ng conversion gamit ang hand-written na arithmetic engine na walang dependency. Nagko-convert ang tool sa pagitan ng pitong CSS unit (px, rem, em, pt, vw, vh, at %) sa pagdaan ng bawat kalkulasyon sa pixel bilang karaniwang base, gamit ang simpleng paghahati o pagpaparami laban sa naka-configure mong root font size, parent font size, o sukat ng viewport.

  1. 1
    Itakda ang mga context value mo
    Bago mag-convert, kino-configure mo ang apat na numerong nagbibigay-kahulugan sa mga relatibong CSS unit: root font size (default 16px, ang default ng browser), font size ng parent element (para sa em at % na conversion), at lapad at taas ng viewport (para sa vw at vh). Ito rin ang mga halagang gagamitin ng browser mo kapag nire-resolve ang CSS sa runtime.
  2. 2
    Pixel bilang pangkalahatang pagitan
    Unang tinatawag ng converter ang toPixels() para i-normalize ang input mo sa raw na bilang ng pixel β€” halimbawa, nagiging 1.5 Γ— baseFontPx ang 1.5rem, at nagiging 0.5 Γ— vpWidth ang 50vw. Pagkatapos, hinahati ng fromPixels() ang bilang ng pixel na iyon sa angkop na factor para sa target na unit. Sabay-sabay na ipinapakita ang lahat ng pitong unit sa conversion table.
  3. 3
    Paghanap ng pinakamalapit na Tailwind token
    Pagkatapos mag-convert, kinakalkula ng tool ang rem value at sinusuri ang dalawang hardcoded na lookup table β€” ang labintatlong font-size token ng Tailwind (text-xs hanggang text-9xl) at ang spacing scale nito β€” hinahanap ang pinakamalapit na tugma ayon sa absolute na distansya. Ang = sign ay nangangahulugang eksaktong token ang halaga; ang β‰ˆ ay nangangahulugang pinakamalapit na tantiya ito.
  4. 4
    Batch na pagbabago ng CSS gamit ang regex
    Tumatanggap ang paste-CSS panel ng raw na CSS text at nag-a-apply ng regex substitution: sa px→rem mode, itinutugma nito ang bawat px token at pinapalitan ang numerong bahagi ng value/baseFontPx + rem; sa rem→px mode, kabaligtaran. Ipinapakita ang bilang ng substitution kaya matitiyak mo kung ilang halaga ang nabago.

Mga Kaugnay na Tool

πŸ“

Tagapalit ng Yunit

Mag-convert sa pagitan ng mga unit ng haba, timbang, temperatura, lawak, dami, at iba pa.

Subukan
πŸ“

Gumagawa ng CSS clamp()

Gumawa ng fluid na CSS clamp() na value para sa responsive na typography at spacing. Itakda ang min/max na laki at viewport range, tingnan ang live preview, at kopyahin ang one-line na CSS.

Subukan
🟦

Gumagawa ng CSS Grid

I-design nang visual ang CSS grid β€” tracks, units at gaps β€” at kopyahin ang generated CSS at HTML.

Subukan

Mga Madalas na Itanong