Pretvornik PX v REM v EM – Brezplačni kalkulator CSS enot
Trenutno pretvorite pikslne v REM in EM enote. Brezplačni pretvornik CSS enot za odzivno spletno oblikovanje. Podpira prilagojene velikosti pisav in izračune v realnem času za natančne rezultate.
Pretvornik enot PX, REM in EM
Pretvorite med piksli (PX), korenskim em (REM) in em (EM) enotami. Vnesite vrednost v katerem koli polju, da vidite enakovredne vrednosti v drugih enotah.
Pretvorni obrazci
- PX v REM: vrednost v px ÷ velikost korenskega fonta
- PX v EM: vrednost v px ÷ velikost fonta nadrejenega elementa
- REM v PX: vrednost v rem × velikost korenskega fonta
- EM v PX: vrednost v em × velikost fonta nadrejenega elementa
Dokumentacija
Pretvornik enot px, rem in em
Pretvornik px v rem in em pretvarja dolžino CSS med piksli (px), korenskim em (rem) in em ter pri tem uporablja velikost korenske pisave in velikost pisave nadrejenega elementa, ki ju določi uporabnik. Te tri enote so najpogostejši načini določanja velikosti besedila in razmikov v CSS, jeziku za oblikovanje spletnih strani.
Kaj so px, rem in em?
Piksel (px) je fiksna enota. Širina polja, nastavljena na 200px, ostane široka 200 px ne glede na velikost pisave, ki jo uporablja stran.
Rem (»korenski em«) je enota, ki se prilagaja velikosti pisave korenskega elementa strani, običajno oznake <html>. Večina brskalnikov nastavi velikost te korenske pisave na 16 px, razen če jo spletno mesto spremeni. Če je velikost korenske pisave 16 px, je 1rem enako 16 px.
Em je enota, ki se prilagaja velikosti pisave nadrejenega elementa, torej elementa, ki jo vsebuje. Če ima nadrejeni element font-size: 20px, je 1em znotraj tega elementa enako 20 px.
Glavna razlika med rem in em je v tem, glede na kaj se posamezna enota meri. Rem se vedno nanaša na korenski element. Em se nanaša na najbližji nadrejeni element, zato se njegova vrednost lahko spremeni na vsaki ravni vgnezdenosti.
Kako izračunati pretvorbo iz px v rem
Za pretvorbo pikslov v rem delite vrednost v pikslih z velikostjo korenske pisave:
pri čemer je r dolžina v rem, p dolžina v pikslih, R pa velikost korenske pisave v pikslih.
Rešen primer
Pri privzeti velikosti korenske pisave 16 px se 24 px pretvori v:
24 ÷ 16 = 1,5 rem
Če spletno mesto nastavi velikost korenske pisave na 10 px (kar je pogost trik z nastavitvijo html { font-size: 62.5%; }, saj je 62,5 % od 16 px enako 10 px), ista vrednost 24 px postane:
24 ÷ 10 = 2,4 rem
Kako izračunati pretvorbo iz rem v px
Za pretvorbo v obratno smer pomnožite vrednost rem z velikostjo korenske pisave:
pri čemer je p dolžina v pikslih, r dolžina v rem, R pa velikost korenske pisave.
Pri korenski velikosti 16 px se 1.5rem pretvori nazaj v 1,5 × 16 = 24 px.
Kako izračunati pretvorbo iz px v em
Za pretvorbo pikslov v em delite vrednost v pikslih z velikostjo pisave nadrejenega elementa:
pri čemer je e dolžina v em, P pa velikost pisave nadrejenega elementa v pikslih.
Rešen primer
Če je velikost pisave nadrejenega elementa 20 px, se 24 px pretvori v:
24 ÷ 20 = 1,2 em
Kako izračunati pretvorbo iz em v px
Vrednost em pomnožite z velikostjo pisave nadrejenega elementa:
pri čemer je p dolžina v pikslih, e dolžina v em, P pa velikost pisave nadrejenega elementa.
Pri velikosti nadrejenega elementa 20 px se 1.2em pretvori nazaj v 1,2 × 20 = 24 px.
Kako izračunati pretvorbo iz rem v em in iz em v rem
Ker se rem in em merita glede na različni velikosti pisave, pretvorba med njima zahteva tako velikost korenske pisave kot velikost pisave nadrejenega elementa:
pri čemer je R velikost korenske pisave, P pa velikost pisave nadrejenega elementa.
Rešen primer
Pri velikosti korenske pisave 16 px in velikosti pisave nadrejenega elementa 20 px se 2rem pretvori v:
2 × (16 ÷ 20) = 1,6 em
Če sta velikosti korenske in nadrejene pisave enaki, je 1 rem vedno enak 1 em.
Kdaj je posamezna enota uporabna
Piksli so primerni za podrobnosti, katerih velikost se ne sme spreminjati, na primer za obrobo širine 1 px ali ikono s fiksno širino.
Rem je pogost pri razmikih in tipografiji, ki morajo ostati po vsej strani enotni. Ker se vedno nanaša na velikost korenske pisave, se vrednost rem ne spremeni, ne glede na to, kako globoko je element vgnezden. To pomeni tudi, da se postavitve, ki temeljijo na rem, samodejno prilagodijo, ko uporabnik poveča privzeto velikost pisave v brskalniku, kar pomaga bralcem s slabšim vidom.
Em je primeren znotraj ene samostojne komponente, na primer gumba, pri katerem naj se notranji odmik prilagaja lastni velikosti pisave. Pogosta težava pri enoti em je kopičenje učinka: če več vgnezdenih elementov uporablja font-size: 1.2em, vsaka raven pomnoži prejšnjo, zato se velikosti pisave povečujejo hitreje, kot je bilo predvideno.
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) */
4Po treh ravneh se je besedilo povečalo za približno 73 %, ne za 20 %, kot bi razvijalec morda pričakoval od enega pravila 1.2em.
Uporaba pretvornika
- Vnesite vrednost v polje za piksel, rem ali em.
- Preostali polji se samodejno posodobita, njuni vrednosti pa se zaokrožita na štiri decimalna mesta.
- Nastavite velikost korenske pisave tako, da ustreza elementu
<html>v projektu. V večini brskalnikov je privzeto 16 px in vpliva samo na rem. - Nastavite velikost pisave nadrejenega elementa tako, da ustreza velikosti pisave elementa, znotraj katerega bi bila uporabljena vrednost em. Vpliva samo na em.
- Z gumbom za kopiranje ob polju kopirajte njegovo vrednost.
Obe polji za velikost pisave sprejemata celo število pikslov, najmanjša dovoljena vrednost pa je 1 px. Gumb za ponastavitev izbriše vrednost in obe velikosti pisave nastavi nazaj na 16 px.
Pod polji orodje nariše po en trak za vsako enoto. Vsi trije trakovi predstavljajo enako fizično dolžino, zato imajo enako širino, kar je hiter preizkus pravilnosti pretvorbe. Trak je do 300 pikslov narisan v dejanski dolžini; daljše vrednosti se pomanjšajo, da se prilegajo, zato se vrednosti 600 pikslov in 900 pikslov obe končata pri 300 pikslov. Trakovi se prikažejo samo, ko je vrednost v pikslih večja od nič.
Pogosta vprašanja
Kakšna je razlika med rem in em? Rem se vedno nanaša na velikost pisave korenskega elementa. Em se nanaša na velikost pisave najbližjega nadrejenega elementa. Vrednost rem ostane povsod na strani enaka, vrednost em pa se lahko spreminja glede na globino vgnezdenosti elementa.
Zakaj brskalniki uporabljajo 16 px kot privzeto velikost pisave? 16 px je že dolgo privzeta velikost besedila v večjih brskalnikih, saj je na običajnih zaslonih udobna za branje brez dodatnega oblikovanja. Smernice za spletno dostopnost priporočajo, da je mogoče besedilo povečati do 200 %, ne da bi se pri tem porušila postavitev strani, pri čemer je 16 px praktično izhodišče.
Kaj je trik 62,5 %?
Nastavitev html { font-size: 62.5%; } spremeni privzeto velikost korenske pisave 16 px v 10 px, saj je 62,5 % od 16 enako 10. Tako je računanje rem preprostejše, ker je 1,6 rem enako 16 px in 2,4 rem enako 24 px.
Ali so lahko vrednosti px, rem in em negativne? Da, pri lastnostih, ki sprejemajo negativne dolžine, na primer pri zunanjih odmikih ali transformacijah CSS. Notranji odmik v CSS ne more biti negativen; brskalniki negativno vrednost notranjega odmika prezrejo. Pretvornik podpira negativne vrednosti, vendar zanje ne nariše stolpcev, ker stolpec ne more imeti negativne širine.
Ali je treba vsako vrednost v pikslih pretvoriti v rem? Ni nujno. Obrobe in druge drobne podrobnosti se običajno ohranijo v pikslih, saj se le redko morajo prilagajati velikosti pisave, pri širinah, manjših od piksla, pa so lahko videti neenakomerno. Rem je primeren za razmike in tipografijo, ki naj se prilagajata uporabnikovi nastavitvi velikosti pisave.
Ali izbira enote vpliva na zmogljivost strani? Ne. Brskalniki med postavitvijo vsako dolžino CSS pretvorijo v isto notranjo vrednost, zato se px, rem in em izrišejo enako hitro. Izbira med njimi vpliva na vzdrževanje in dostopnost, ne pa na hitrost.