Fara beint í aðalefni
LibraTool logoLibraTool

Pixelí REM breytir — ókeypis

Breyttu á milli px, rem, em, pt, vw, vh og % með stillanlegri grunnleturstærð. Inniheldur viðmiðunartöflu fyrir algengar pixelstærðir.

Virkar án nettengingar eftir hleðslu
1rem

Samhengi (hefur áhrif á rem/em/vw/vh/%)

Allar umbreytingar fyrir 16 px

Næstu Tailwind tákn (við 16px rót)

Algengar pixlastærðir → rem (við 16px grunn)

Breytu límdum CSS

Algeng notkun

  • PX til REM fyrir vefþróunUmbreyttu pixlgildi í rem einingar fyrir skalanlegt, aðgengilegt CSS. Stilltu grunnleturstærðina og sjáðu samstundis öll jafngild gildi.
  • CSS einingar fyrir svörunargildi hönnunUmbreyttu milli px, vw, vh og % til að byggja útlit sem svara rétt til mismunandi skjástærða og stefnu.
  • Umbreyttu hönnunareinkunn til CSS einingaÞýðdu Figma eða Sketch pixlgildi til rem/em eininga fyrir hrein, skalanlegt CSS framkvæmd.
  • Tailwind CSS einingavísirSkildu hvernig Tailwind CSS stærðarflokkar kortleggja á pixl og rem gildi fyrir nákvæma framkvæmd.
  • Umbreyttu CSS einingar fyrir prentst stílskjölUmbreyttu milli px, pt og rem fyrir prentmiðla fyrirspurnir og PDF úttak CSS.

Hvernig það virkar

Allar breytingar keyra alfarið í vafranum þínum með handskrifaðri aritmetík-vél án háða. Tólið breytir milli sjö CSS-eininga (px, rem, em, pt, vw, vh, og %) með því að beina sérhverjum útreikningi gegnum pixla sem sameiginlegan grunn, beitir einfaldri deilingu eða margföldun gegn stilltri rót-leturstærð þinni, foreldur-leturstærð, eða sjónsviðsvíddum.

  1. 1
    Stilltu samhengisgildin þín
    Áður en breytt er stillir þú fjórar tölurnar sem gera hlutfallslegar CSS-einingar merkingarbærar: rót-leturstærð (sjálfgefið 16px, sem er sjálfgefið vafrans), foreldur-elements leturstærð (fyrir em og % breytingar), og sjónsviðsbreidd og -hæð (fyrir vw og vh). Þetta eru sömu gildi og vafrinn þinn myndi nota við að leysa CSS á keyrslutíma.
  2. 2
    Pixill sem alheims-millistig
    Breytirinn kallar fyrst á toPixels() til að normalisera inntakið þitt í hráan pixilfjölda — til dæmis verður 1,5rem að 1,5 × baseFontPx, og 50vw verður að 0,5 × vpWidth. Svo deilir fromPixels() þeim pixilfjölda með viðeigandi stuðli fyrir markeininguna. Allar sjö einingarnar eru sýndar samtímis í breytingatöflunni.
  3. 3
    Næsta Tailwind-tákn uppfletting
    Eftir breytingu reiknar tólið rem-gildið og skannar tvær fastar uppflettitöflur — þrettán leturstærð-tákn Tailwind (text-xs til text-9xl) og bilaskala þess — finnur næstu samsvörun með algildri fjarlægð. = merki þýðir að gildið er nákvæmt tákn; ≈ þýðir að það er næsta nálgun.
  4. 4
    Magn-CSS endurskrifun með regex
    Líma-CSS spjaldið tekur við hráum CSS-texta og beitir regex-uppskiptingu: í px→rem ham passar það við sérhvert px-tákn og skiptir tölugildinu út fyrir gildi/baseFontPx + rem; í rem→px ham gerir það öfugt. Uppskiptingartalan er sýnd svo þú getir staðfest hversu mörg gildi voru endurskrifuð.

Tengd verkfæri

📏

Einingabreytir

Umbreyttu á milli lengdareininga, þyngdar, hitastigs, flatarmáls, rúmmáls og fleira.

Prófaðu það
📐

CSS clamp()-smiður

Búðu til fljótandi CSS clamp() gildi fyrir svarhæfar leturnám og bil. Stilltu lágmarks/hámmarksstærð og skjásvið, sjáðu beina forskoðun og afritaðu einalína CSS.

Prófaðu það
🟦

CSS Grid framleiðandi

Hannstu CSS hnitakerfi með sjónrænum hætti — brautir, einingar og bila — og afritaðu mynduðu CSS og HTML.

Prófaðu það

Algengar spurningar