Slik bruker du det
- Angi rotskriftstørrelsen hvis nettstedet ditt endrer den (for eksempel gjør html { font-size: 62.5% } at den blir 10px).
- Skriv inn en verdi i ett av feltene for å konvertere px til rem eller rem til px. Bytt til em hvis du setter størrelse relativt til et overordnet element.
- Bruk tabellen for raske oppslag, eller lim inn en CSS-snutt for å konvertere alle px-lengder på én gang og kopiere resultatet.
Slik fungerer det
rem = px ÷ rotskriftstørrelsen. Med standard rotskriftstørrelse på 16 px er 24 px = 1.5rem og 14 px = 0.875rem. em bruker samme formel, men med foreldreelementets skriftstørrelse, og det er grunnen til at nestede em-verdier multipliserer seg; rem unngår det fordi det alltid refererer til roten.
Å bruke rem for skriftstørrelser og mellomrom gjør at tekst skaleres når noen øker standard skriftstørrelse i nettleserinnstillingene, noe som hjelper personer med nedsatt syn. Verdier avrundes til fire desimaler.
Kodebitkonvertereren endrer tall etterfulgt av px. Den lar kommentarer, url(…) og tekst i anførselstegn stå urørt, beholder 1 px hvis du ber om det (tynne rammer bør vanligvis forbli 1 px), skriver 0 px som 0, og lar som standard @media- og @container-betingelser være i fred, fordi rem og em i media queries alltid refererer til nettleserens opprinnelige skriftstørrelse, uavhengig av hvilken rotskriftstørrelse du angir. Den forstår ikke calc()-semantikk utover å erstatte px-tallene inni den, noe som fortsatt er riktig fordi hver lengde konverteres for seg.
Eksempler
Standard rotskriftstørrelse
Med en rot på 16 px: 12 px = 0.75rem, 20 px = 1.25rem, 32 px = 2rem, 0.5rem = 8 px.
Trikset med 62,5 %
Hvis CSS-en din angir html { font-size: 62.5% }, er roten 10 px, så 14 px = 1.4rem og 24 px = 2.4rem. Sett feltet for rotskriftstørrelse til 10 for å matche.
Konvertere en komponent
padding: 24px 16px; border: 1px solid #ddd; blir til padding: 1.5rem 1rem; border: 1px solid #ddd; med «Behold 1px-verdier» slått på.
Ofte stilte spørsmål
Bør jeg bruke rem eller em?
Bruk rem for de fleste skriftstørrelser, mellomrom og layout, fordi det er forutsigbart overalt. Bruk em når noe skal skalere med komponentens egen tekststørrelse, for eksempel innvendig utfylling i en knapp.
Hvorfor ikke konvertere media queries til rem?
Det kan du, men i en media query er 1rem alltid lik nettleserens standard skriftstørrelse (vanligvis 16 px), ikke html-skriftstørrelsen din. Konvertereren hopper derfor over dem som standard; slå av alternativet hvis du likevel deler på 16.
Er rem bedre for tilgjengelighet enn px?
For skriftstørrelser, ja: rem respekterer brukerens standard skriftstørrelsesinnstilling, mens px-skriftstørrelser ignorerer den. Nettleserzoom fungerer med begge enhetene.
Personvern
Konverteringer og CSS-snutten behandles i nettleseren din og sendes aldri noe sted.