Liigu sisu juurde
🛠️
Whiz Tools

PX-st REM-i ja EM-i teisendaja – Tasuta CSS-i ühikute kalkulaator

Teisendage pikslitest REM-i ja EM-i ühikutesse koheselt. Tasuta CSS-i ühikute teisendaja responsiivseks veebikujunduseks. Toetab kohandatud fondi suurusi ja reaalajas arvutusi täpsete tulemuste saamiseks.

PX, REM ja EM ühikute teisendaja

Teisendage pikslid (PX), root em (REM) ja em (EM) ühikud. Sisestage väärtus mistahes väljale, et näha samaväärset väärtust teistes ühikutes.

px
px
px
rem
em
Visualiseering pole saadaval negatiivsetele või nullilistele väärtustele

Teisendamise valemid

  • PX to REM: väärtus px-tes ÷ juurfont suurus
  • PX to EM: väärtus px-tes ÷ vanemelementi fondi suurus
  • REM to PX: väärtus rem-ides × juurfont suurus
  • EM to PX: väärtus em-ides × vanemelementi fondi suurus
Laadimiskalkulaator...
📚

Dokumentatsioon

PX-, REM- ja EM-ühikute muundur

PX-i, rem-i ja em-i muundur teisendab CSS-i pikkuse pikslite (px), juur-em-i (rem) ja em-i vahel, kasutades juurfondi suurust ning em-ühiku elemendi fondi suurust, mille kasutaja määrab. Need kolm ühikut on CSS-is teksti ja vahede määramiseks kõige levinumad viisid; CSS on veebilehtede kujundamiseks kasutatav keel.

Mis on px, rem ja em?

Piksel (px) on fikseeritud ühik. Laiusega 200px kast jääb 200px laiuseks olenemata lehe fondi suurusest.

Rem („juur-em”) on ühik, mis skaleerub lehe juurelemendi, tavaliselt <html>-sildi, fondi suuruse järgi. Enamik brausereid määrab juurfondi suuruseks 16px, kui veebisait seda ei muuda. Kui juurfondi suurus on 16px, võrdub 1rem väärtusega 16px.

Em on ühik, mis skaleerub vanemelemendi ehk seda sisaldava elemendi fondi suuruse järgi. Kui vanemelemendil on font-size: 20px, võrdub selles elemendis 1em väärtusega 20px.

Rem-i ja em-i peamine erinevus seisneb selles, mille suhtes kumbki neid mõõdab. Rem vaatab alati juurelementi. Em vaatab lähimat vanemelementi, mistõttu võib selle väärtus pesastuse igal tasemel muutuda.

Kuidas teisendada px rem-iks

Pikslite rem-ideks teisendamiseks jaga piksliväärtus juurfondi suurusega:

r=pRr = \frac{p}{R}

kus r on pikkus rem-ides, p pikkus pikslites ja R juurfondi suurus pikslites.

Näidisarvutus

Juurfondi vaikesuuruse 16px korral teisendub 24px järgmiselt:

24 ÷ 16 = 1,5rem

Kui veebisait määrab juurfondi suuruseks 10px (levinud võte, mille puhul määratakse html { font-size: 62.5%; }, sest 62,5% väärtusest 16px on 10px), saab samast 24px väärtusest:

24 ÷ 10 = 2,4rem

Kuidas teisendada rem px-ideks

Teises suunas teisendamiseks korruta rem-i väärtus juurfondi suurusega:

p=r×Rp = r \times R

kus p on pikkus pikslites, r pikkus rem-ides ja R juurfondi suurus.

Juurfondi suuruse 16px korral teisendub 1.5rem tagasi nii: 1,5 × 16 = 24px.

Kuidas teisendada px em-iks

Pikslite em-ideks teisendamiseks jaga piksliväärtus vanemelemendi fondi suurusega:

e=pPe = \frac{p}{P}

kus e on pikkus em-ides ja P vanemelemendi fondi suurus pikslites.

Näidisarvutus

Kui vanemelemendi fondi suurus on 20px, teisendub 24px järgmiselt:

24 ÷ 20 = 1,2em

Kuidas teisendada em px-ideks

Korruta em-i väärtus vanemelemendi fondi suurusega:

p=e×Pp = e \times P

kus p on pikkus pikslites, e pikkus em-ides ja P vanemelemendi fondi suurus.

Vanemelemendi suuruse 20px korral teisendub 1.2em tagasi nii: 1,2 × 20 = 24px.

Kuidas teisendada rem em-iks ja em rem-iks

Kuna rem ja em lähtuvad eri fondi suurustest, on nende vaheliseks teisendamiseks vaja nii juurfondi kui ka vanemelemendi fondi suurust:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

kus R on juurfondi suurus ja P vanemelemendi fondi suurus.

Näidisarvutus

Kui juurfondi suurus on 16px ja vanemelemendi fondi suurus 20px, teisendub 2rem järgmiselt:

2 × (16 ÷ 20) = 1,6em

Kui juur- ja vanemelemendi fondi suurused on võrdsed, võrdub 1rem alati 1em-iga.

Millal kumbki ühik kasulik on

Pikslid sobivad hästi detailide jaoks, mille suurus ei tohiks muutuda, näiteks 1px äärise või fikseeritud laiusega ikooni puhul.

Rem-i kasutatakse sageli vahede ja tüpograafia puhul, mis peaksid kogu lehel ühtlasena püsima. Kuna rem viitab alati juurfondi suurusele, ei muutu rem-i väärtus olenemata elemendi pesastuse sügavusest. See tähendab ka, et rem-il põhinevad paigutused kohanduvad automaatselt, kui kasutaja suurendab brauseri vaikefondi suurust, mis aitab vaegnägijatest lugejaid.

Em sobib hästi ühe iseseisva komponendi sees, näiteks nupul, mille korral peaks sisevahe skaleeruma koos nupu enda fondi suurusega. Em-i levinud probleem on kumuleerumine: kui mitu pesastatud elementi kasutavad igaüks väärtust font-size: 1.2em, korrutab iga tasand eelmise tasandi väärtuse läbi, mistõttu fondi suurus kasvab kavandatust kiiremini.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Kolme tasandi järel on tekst suurenenud ligikaudu 73%, mitte 20% võrra, mida arendaja võiks ühe 1.2em reegli põhjal oodata.

Teisendaja kasutamine

  1. Sisesta väärtus piksli-, rem- või em-välja.
  2. Ülejäänud kaks välja uuendatakse automaatselt ja ümardatakse nelja kümnendkohani.
  3. Määra juurfondi suurus projekti <html>-elemendi järgi. Enamikus brauserites on see vaikimisi 16px ja see mõjutab ainult rem-i.
  4. Määra vanemelemendi fondi suurus selle elemendi fondi suuruse järgi, mille sees em-i väärtust kasutatakse. See mõjutab ainult em-i.
  5. Väärtuse kopeerimiseks kasuta välja kõrval olevat kopeerimisnuppu.

Mõlema fondisuuruse välja väärtus peab olema täisarv pikslites ja väikseim lubatud väärtus on 1px. Lähtestusnupp tühjendab väärtuse ja seab mõlemad fondi suurused tagasi väärtusele 16px.

Väljade all joonistab tööriist iga ühiku jaoks ühe riba. Kõik kolm riba tähistavad sama füüsilist pikkust, seega on nende laius sama, mis võimaldab kiiresti kontrollida, kas teisendus on õige. Riba joonistatakse tegelikus pikslipikkuses kuni väärtuseni 300px; pikemad väärtused skaleeritakse sobivaks, mistõttu lõpevad nii 600px kui ka 900px väärtus300px juures. Ribad kuvatakse ainult siis, kui piksliväärtus on suurem kui null.

Korduma kippuvad küsimused

Mis vahe on rem-il ja em-il? Rem viitab alati juurelemendi fondi suurusele. Em viitab lähima vanemelemendi fondi suurusele. Rem-i väärtus jääb lehel kõikjal samaks; em-i väärtus võib muutuda olenevalt elemendi pesastuse sügavusest.

Miks kasutavad brauserid vaikefondi suurusena 16px? 16px on olnud suuremate brauserite vaike-tekstimõõt, sest seda on tavalistel ekraanidel ilma täiendava kujunduseta mugav lugeda. Veebi juurdepääsetavuse juhised soovitavad, et teksti saaks suurendada kuni 200% võrra ilma lehe paigutust rikkumata, ja 16px on selleks praktiline lähtepunkt.

Mis on 62,5% võte? Määrang html { font-size: 62.5%; } muudab juurfondi vaikeväärtuse 16px väärtuseks 10px, sest 62,5% väärtusest 16 on 10. See lihtsustab rem-i arvutamist, sest 1,6rem võrdub 16px-iga ja 2,4rem võrdub 24px-iga.

Kas px-i, rem-i ja em-i väärtused võivad olla negatiivsed? Jah, omaduste puhul, mis lubavad negatiivseid pikkusi, näiteks veeriste või CSS-i teisenduste korral. CSS-is ei saa sisevahe olla negatiivne; brauserid eiravad negatiivset sisevahe väärtust. Muundur käsitleb negatiivseid väärtusi, kuid ei joonista nende jaoks ribasid, sest ribal ei saa olla negatiivset laiust.

Kas iga piksliväärtus tuleks teisendada rem-iks? Mitte tingimata. Äärised ja muud peened detailid jäetakse tavaliselt pikslitesse, sest need ei pea fondi suurusega skaleeruma ning alampiksli laiuste korral võivad need ebaühtlased välja näha. Rem sobib vahede ja tüpograafia jaoks, mis peaksid skaleeruma kasutaja fondisuuruse eelistusega.

Kas ühiku valik mõjutab lehe jõudlust? Ei. Paigutuse ajal teisendavad brauserid kõik CSS-i pikkused samaks sisemiseks väärtuseks, seega renderdatakse px, rem ja em sama kiiresti. Nende valik mõjutab hooldatavust ja juurdepääsetavust, mitte kiirust.