Ugrás a fő tartalomra
LibraTool logoLibraTool

Ingyenes Pixel–REM konvertáló

Konvertálj px, rem, em, pt, vw, vh és % egységek között beállítható alap betűmérettel. Referencia táblázatot tartalmaz a leggyakoribb pixelméretekhez.

Betöltés után offline is működik
1rem

Kontextus (hat a rem/em/vw/vh/%-ra)

Összes átváltás: 16 px

Legközelebbi Tailwind tokenek (16px root esetén)

Gyakori px méretek → rem (16px alapon)

Beillesztett CSS konvertálása

Gyakori felhasználások

  • PX-ről REM-re a webes fejlesztéshezA pixelértékeket rem egységekké konvertálja a skálázható, hozzáférhető CSS-hez. Állítsa be az alapvető betűméretét és azonnal lássa az összes megfelelő értéket.
  • CSS egységek a reszponzív tervhezKonvertáljon px, vw, vh és % között olyan elrendezések létrehozásához, amelyek helyesen reagálnak a különféle képernyőméretek és tájolások.
  • A terv specifikációit CSS egységekre konvertáljaFordítsa le a Figma vagy Sketch pixelértékeket rem/em egységekre a tiszta, skálázható CSS megvalósításhoz.
  • Tailwind CSS egység hivatkozásÉrtse meg, hogyan térképezhetők a Tailwind CSS méretosztályok pixel és rem értékekre a pontos megvalósítás érdekében.
  • CSS egységek konvertálása nyomtatási stíluslapokhozKonvertáljon px, pt és rem között nyomtatási médialekérdezésekhez és PDF-kimenethez CSS-hez.

Hogyan működik

Minden átváltás teljes egészében a böngésződben zajlik, egy kézzel írt, függőségmentes aritmetikai motorral. Az eszköz hét CSS-mértékegység (px, rem, em, pt, vw, vh és %) között vált át úgy, hogy minden számítást pixelen mint közös alapon keresztül végez, egyszerű osztást vagy szorzást alkalmazva a beállított gyökér-betűméreted, szülőelem-betűméreted vagy a nézetablak méretei szerint.

  1. 1
    Állítsd be a kontextusértékeket
    Átváltás előtt beállítod azt a négy számot, amelyek a relatív CSS-egységeket értelmessé teszik: gyökér-betűméret (alapértelmezett 16px, a böngésző alapértéke), szülőelem betűmérete (em és % átváltáshoz), valamint a nézetablak szélessége és magassága (vw és vh esetén). Ezek ugyanazok az értékek, amelyeket a böngésződ is használna a CSS futásidejű feloldásakor.
  2. 2
    A pixel mint univerzális köztes egység
    Az átváltó először meghívja a toPixels() függvényt, hogy a bemenetet nyers pixelszámra normalizálja — például 1,5rem 1,5 × baseFontPx lesz, az 50vw pedig 0,5 × vpWidth. Ezután a fromPixels() elosztja ezt a pixelszámot a célegységnek megfelelő tényezővel. Mind a hét egység egyszerre jelenik meg az átváltási táblázatban.
  3. 3
    A legközelebbi Tailwind-token keresése
    Átváltás után az eszköz kiszámítja a rem-értéket, és két hardkódolt keresőtáblát pásztáz végig — a Tailwind tizenhárom betűméret-tokenjét (text-xs – text-9xl) és térköz-skáláját —, megkeresve a legközelebbi egyezést abszolút távolság alapján. Az = jel pontos tokent jelent; a ≈ a legközelebbi közelítést.
  4. 4
    Kötegelt CSS-átírás reguláris kifejezéssel
    A CSS-beillesztő panel nyers CSS-szöveget fogad, és egy reguláris kifejezés-helyettesítést alkalmaz: px→rem módban minden px tokent megkeres, és a számértéket value/baseFontPx + rem formára cseréli; rem→px módban fordítva jár el. A helyettesítések száma megjelenik, így ellenőrizheted, hány érték került átírásra.

Kapcsolódó eszközök

📏

Mértékegység-konverter

Konvertáljon hossz, súly, hőmérséklet, terület, térfogat és egyéb mértékegységek között.

Próbálja ki
📐

CSS clamp() generátor

Generálj folyékony CSS clamp() értéket reszponzív tipográfiához és közbeiktatáshoz. Állítsd be a min/max méretet és a nézetablak-tartományt, tekintsd meg az élő előnézetet, és másold az egysoros CSS-t.

Próbálja ki
🟦

CSS Grid generátor

Vizuálisan tervezzen meg egy CSS gridot — sávok, egységek és hézagok — és másolja ki a generált CSS-t és HTML-t.

Próbálja ki

Gyakran ismételt kérdések