Liigu põhisisu juurde
LibraTool logoLibraTool

Piksel REM-i konverter tasuta

Teisenda px, rem, em, pt, vw, vh ja % vahel konfigureeritava põhifondisuurusega. Sisaldab viidetabelit tavaliste pikslisuuruste jaoks.

Töötab võrguühenduseta pärast laadimist
1rem

Kontekst (mõjutab rem/em/vw/vh/%)

Kõik teisendused: 16 px

Lähimad Tailwind'i sõned (16px juures)

Tavalised pikslisuurused → rem (alusel 16px)

Teisenda kleepitud CSS

Levinud kasutusviisid

  • PX REM-ile veebiarenduseleTeisendage pikselite väärtused rem-ühikuteks skaalaavale, juurdepääsetavale CSS-le. Määrake baasfondi suurus ja vaadake kohe kõiki samaväärseid väärtusi.
  • CSS-ühikud reageerimisvõimelise disaini jaoksTeisendage px, vw, vh ja % vahel paigutuste ehitamiseks, mis õigesti kohanduvad erinevatele ekraani suurustele ja orientatsioonidele.
  • Teisendage disaini spetsifikatsioonid CSS-ühikuteksTõlkige pikselite väärtused Figmast või Sketchist rem/em-ühikuteks puhta, skaalaava CSS-i rakendamiseks.
  • Tailwind CSS-i üksuse viideSaage aru, kuidas Tailwind CSS-i suurus klassid kaardistuvad pikselite ja rem-väärtustele täpse rakendamiseks.
  • Teisendage CSS-ühikud printimise stiililehtedeleTeisendage px, pt ja rem vahel prindi meediaküsimuste ja PDF-i CSS-väljundi jaoks.

Kuidas see töötab

Kõik teisendused töötavad täielikult sinu brauseris käsitsi kirjutatud aritmeetikamootoriga ilma sõltuvusteta. Tööriist teisendab seitsme CSS-ühiku (px, rem, em, pt, vw, vh ja %) vahel, suunates iga arvutuse läbi pikslite kui ühise baasi, rakendades lihtsat jagamist või korrutamist sinu konfigureeritud juurfondisuuruse, vanemfondisuuruse või vaateakna mõõtmete suhtes.

  1. 1
    Sea oma konteksti väärtused
    Enne teisendamist konfigureerid neli numbrit, mis muudavad suhtelised CSS-ühikud tähenduslikuks: juurfondisuurus (vaikimisi 16px, brauseri vaikeväärtus), vanemelemendi fondisuurus (em ja % teisenduste jaoks) ning vaateakna laius ja kõrgus (vw ja vh jaoks). Need on samad väärtused, mida sinu brauser kasutaks CSS-i lahendamisel käitusajal.
  2. 2
    Piksel kui universaalne vahesaadus
    Konverter kutsub esmalt toPixels(), et normaliseerida sinu sisend toorese pikslite arvuni — näiteks 1,5rem saab 1,5 × baasFondiPx, ja 50vw saab 0,5 × vpLaius. Seejärel jagab fromPixels() selle pikslite arvu sihtühiku sobiva teguriga. Kõik seitse ühikut näidatakse samaaegselt teisenduse tabelis.
  3. 3
    Lähima Tailwindi tokeni otsing
    Pärast teisendamist arvutab tööriist rem väärtuse ja skaneerib kaks kõvakodeeritud otsingutabelit — Tailwindi kolmteist fondisuuruse tokenit (text-xs kuni text-9xl) ja selle vaheskaala — leides lähima vaste absoluutse kauguse järgi. = märk tähendab, et väärtus on täpne token; ≈ tähendab, et see on lähim lähend.
  4. 4
    Lote CSS ümberkirjutamine regulaaravaldise abil
    Kleebi-CSS paneel aktsepteerib toorest CSS-teksti ja rakendab regulaaravaldise asendust: px→rem režiimis sobitab see iga px-tokeni ja asendab numbrilise osa väärtus/baasFondiPx + rem'iga; rem→px režiimis teeb see vastupidise. Asenduste arv näidatakse, et saaksid verifitseerida, mitu väärtust ümber kirjutati.

Seotud tööriistad

📏

Ühikute teisendaja

Teisenda pikkuse, kaalu, temperatuuri, pindala, mahu ja muude ühikute vahel.

Proovi järele
📐

CSS clamp() generaator

Loo vedeliku CSS clamp() väärtus reageeriva tipograafia ja tühiku jaoks. Määra min/max suurus ja vaateava vahemik, vaata reaalajas eelvaadet ja kopeeri ühe rea CSS.

Proovi järele
🟦

CSS Ruudustiku generaator

Kujundage visuaalselt CSS ruudustikku — rajad, ühikud ja vahed — ja kopeerige loodud CSS ja HTML.

Proovi järele

Korduma kippuvad küsimused