Käyttöohje
- Aseta juurifonttikoko, jos sivustosi muuttaa sitä (esimerkiksi html { font-size: 62.5% } tekee siitä 10px).
- Kirjoita arvo kumpaan tahansa kenttään muuntaaksesi px→rem tai rem→px. Vaihda em-yksikköön, jos mitoitat suhteessa vanhempaan elementtiin.
- Käytä taulukkoa nopeisiin tarkistuksiin tai liitä CSS-koodinpätkä muuntaaksesi kaikki px-pituudet kerralla ja kopioi tulos.
Näin se toimii
rem = px ÷ juurifonttikoko. Oletusjuurikoolla 16px 24px on 1,5rem ja 14px on 0,875rem. em käyttää samaa kaavaa, mutta jakajana on pääelementin fonttikoko, minkä vuoksi sisäkkäiset em-arvot kertautuvat; rem välttää tämän, koska se viittaa aina juureen.
Käyttämällä rem-yksikköä fonttikokojen ja välistysten kanssa teksti skaalautuu, kun käyttäjä suurentaa selaimen oletusfonttikokoa asetuksistaan, mikä auttaa heikkonäköisiä. Arvot pyöristetään neljän desimaalin tarkkuuteen.
Pätkämuunnin muuttaa numerot, joiden perässä on px. Se jättää kommentit, url(…)-arvot ja lainausmerkeissä olevat merkkijonot ennalleen, säilyttää 1px-arvot pyydettäessä (ohuet reunukset kannattaa yleensä pitää 1px:nä), kirjoittaa 0px:n arvoksi 0 ja jättää oletuksena @media- ja @container-ehdot koskematta, koska mediakyselyissä rem ja em viittaavat aina selaimen alkuperäiseen fonttikokoon riippumatta siitä, minkä juurifonttikoon asetat. Se ei ymmärrä calc()-semantiikkaa muutoin kuin korvaamalla sen sisällä olevat px-numerot, mikä on silti oikein, koska jokainen pituus muunnetaan erikseen.
Esimerkit
Oletusjuurikoko
16px:n juurifonttikoolla: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
62.5% -kikka
Jos CSS:ssäsi on html { font-size: 62.5% }, juuri on 10px, joten 14px = 1.4rem ja 24px = 2.4rem. Aseta juurifonttikoko-kenttään arvo 10, jotta arvot vastaavat toisiaan.
Komponentin muuntaminen
padding: 24px 16px; border: 1px solid #ddd; muuttuu muotoon padding: 1.5rem 1rem; border: 1px solid #ddd;, kun "Pidä 1px-arvot" on käytössä.
Usein kysytyt kysymykset
Kumpaa kannattaa käyttää: rem vai em?
Käytä rem-yksikköä useimpiin fonttikokoihin, välistyksiin ja asetteluun, koska se on ennakoitavissa kaikkialla. Käytä em-yksikköä, kun jonkin tulee skaalautua oman komponenttinsa tekstikoon mukaan, kuten painikkeen sisäinen täyte.
Miksi mediakyselyitä ei muunneta rem-yksiköiksi?
Voit, mutta mediakyselyssä 1rem on aina sama kuin selaimen oletusfonttikoko (yleensä 16px), ei oma html-fonttikokosi. Siksi muunnin ohittaa ne oletuksena; poista asetus pois käytöstä, jos jaat kuitenkin 16:lla.
Onko rem saavutettavuuden kannalta parempi kuin px?
Fonttikokojen osalta kyllä: rem kunnioittaa käyttäjän oletusfonttikokoasetusta, kun taas px-fonttikoot jättävät sen huomiotta. Selaimen zoomaus toimii kummallakin yksiköllä.
Tietosuoja
Muunnokset ja CSS-koodinpätkä käsitellään selaimessasi, eikä niitä lähetetä minnekään.