Siirry pääsisältöön
LibraTool logoLibraTool

Pikseli–REM-muunnin ilmaiseksi

Muunna px-, rem-, em-, pt-, vw-, vh- ja %-arvojen välillä konfiguroitavalla perusfonttikolla. Sisältää viitetaulukon yleisille pikselikoille.

Toimii offline-tilassa kerran ladattuna
1rem

Konteksti (vaikuttaa rem/em/vw/vh/%:iin)

Kaikki muunnokset arvolle 16 px

Lähimmät Tailwind-tunnukset (kohteessa 16px juuri)

Yleiset pikselikoot → rem (16px pohjalla)

Muunna liitetty CSS

Yleiset käyttötavat

  • PX REM VerkkokehitykseenMuunna pikseliarvot rem-yksiköiksi skaalautuvaa ja saavutettavaa CSS:ää varten. Aseta perusfonttikokosi ja näe kaikki vastaavat arvot välittömästi.
  • CSS-yksiköt Reagoivaan MuotoiluunMuunna px:n, vw:n, vh:n ja %:n välillä rakentaaksesi asetteluja, jotka vastaavat oikein erilaisiin näytön kokoon ja suuntaan.
  • Muunna Muotoilun Tekniset Tiedot CSS-yksiköiksiKäännä Figman tai Sketchin pikseliarvot rem/em-yksiköiksi puhtaaksi ja skaalautuvaksi CSS:n toteutukseksi.
  • Tailwind CSS Yksikkö ViiteYmmärrä kuinka Tailwind CSS:n koko-luokat vastaavat pikseliä ja rem-arvoja tarkkaa toteutusta varten.
  • Muunna CSS-yksiköt TulostyyleihinMuunna px:n, pt:n ja rem:n välillä tulostusmedian kyselyihin ja PDF-tulostuksen CSS:ään.

Miten se toimii

Kaikki muunnokset tapahtuvat kokonaan selaimessasi käsin kirjoitetulla aritmetiikkamoottorilla ilman riippuvuuksia. Työkalu muuntaa seitsemän CSS-yksikön (px, rem, em, pt, vw, vh ja %) välillä ohjaamalla jokaisen laskennan pikselien kautta yhteisenä perustana, soveltaen yksinkertaista jako- tai kertolaskua asettamaasi juurifonttikokoon, vanhemman fonttikokoon tai näyttöikkunan mittoihin nähden.

  1. 1
    Aseta kontekstiarvosi
    Ennen muuntamista määrität neljä lukua, jotka tekevät suhteellisista CSS-yksiköistä merkityksellisiä: juurifonttikoon (oletus 16px, selaimen oletus), vanhempaa elementtiä koskevan fonttikoon (em- ja %-muunnoksille), sekä näyttöikkunan leveyden ja korkeuden (vw:lle ja vh:lle). Nämä ovat samat arvot, joita selaimesi käyttäisi ratkaistessaan CSS:ää ajonaikaisesti.
  2. 2
    Pikseli universaalina välimuotona
    Muunnin kutsuu ensin toPixels()-funktiota normalisoidakseen syötteesi raa'aksi pikselimääräksi — esimerkiksi 1,5rem muuttuu muotoon 1,5 × perusFonttiPx, ja 50vw muuttuu muotoon 0,5 × näyttöLeveys. Sitten fromPixels() jakaa tuon pikselimäärän kohdeyksikölle sopivalla kertoimella. Kaikki seitsemän yksikköä näytetään samanaikaisesti muunnostaulukossa.
  3. 3
    Lähimmän Tailwind-tunnisteen haku
    Muunnoksen jälkeen työkalu laskee rem-arvon ja skannaa kaksi kiinteästi koodattua hakutaulukkoa — Tailwindin kolmetoista fonttikokotunnistetta (text-xs – text-9xl) ja sen välistysasteikon — löytääkseen lähimmän vastaavuuden itseisarvoisen etäisyyden perusteella. =-merkki tarkoittaa, että arvo on tarkka tunniste; ≈ tarkoittaa, että se on lähin approksimaatio.
  4. 4
    Erän CSS:n uudelleenkirjoitus regexillä
    Liitä CSS -paneeli hyväksyy raakaa CSS-tekstiä ja soveltaa regex-korvauksen: px→rem-tilassa se täsmää jokaisen px-tunnisteen ja korvaa numeerisen osan lausekkeella arvo/perusFonttiPx + rem; rem→px-tilassa se tekee päinvastoin. Korvausten määrä näytetään, jotta voit tarkistaa, kuinka monta arvoa kirjoitettiin uudelleen.

Liittyvät työkalut

📏

Yksikkömuunnin

Muunna pituuden, painon, lämpötilan, pinta-alan, tilavuuden ja muiden yksiköiden välillä.

Kokeile sitä
📐

CSS clamp() -generaattori

Luo sujuva CSS clamp() -arvo responsiiviselle typografialle ja välistykselle. Aseta minimi/maksimikoko ja näyttöporttiala, katso live-esikatselu ja kopioi yksirivinen CSS.

Kokeile sitä
🟦

CSS-verkon generaattori

Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.

Kokeile sitä

Usein kysytyt kysymykset