Sådan bruger du det
- Indstil rodskriftstørrelsen, hvis dit website ændrer den (f.eks. gør html { font-size: 62.5% } den til 10px).
- Skriv en værdi i et af felterne for at konvertere px til rem eller rem til px. Skift til em, hvis du angiver størrelser relativt til et forældreelement.
- Brug tabellen til hurtige opslag, eller indsæt et CSS-kodestykke for at konvertere alle px-længder på én gang og kopiere resultatet.
Sådan fungerer det
rem = px ÷ rodens skriftstørrelse. Med standardrodstørrelsen på 16px er 24px 1,5rem og 14px 0,875rem. em bruger den samme formel, men med det overordnede elements skriftstørrelse, og derfor multipliceres indlejrede em-værdier; rem undgår det, fordi det altid henviser til roden.
Brug af rem til skriftstørrelser og afstande lader tekst skalere, når nogen hæver standardskriftstørrelsen i browserindstillingerne, hvilket hjælper personer med nedsat syn. Værdier er afrundet til fire decimaler.
Snippet-konverteren ændrer tal efterfulgt af px. Den lader kommentarer, url(…) og strenge i anførselstegn være urørte, beholder 1px, hvis du beder om det (tynde rammer bør normalt forblive 1px), skriver 0px som 0 og rører som standard ikke ved @media- og @container-betingelser, fordi rem og em i media queries altid henviser til browserens oprindelige skriftstørrelse, uanset hvilken rodskriftstørrelse du indstiller. Den forstår ikke calc()-semantik ud over at erstatte px-tallene inde i den, hvilket stadig er korrekt, fordi hver længde konverteres for sig selv.
Eksempler
Standardrodstørrelse
Med en rod på 16px: 12px = 0,75rem, 20px = 1,25rem, 32px = 2rem, 0,5rem = 8px.
62,5 %-tricket
Hvis din CSS sætter html { font-size: 62.5% }, er roden 10px, så 14px = 1,4rem og 24px = 2,4rem. Sæt feltet Rodskriftstørrelse til 10 for at matche.
Konvertering af en komponent
padding: 24px 16px; border: 1px solid #ddd; bliver til padding: 1.5rem 1rem; border: 1px solid #ddd; med “Behold 1px-værdier” slået til.
Ofte stillede spørgsmål
Skal jeg bruge rem eller em?
Brug rem til de fleste skriftstørrelser, afstande og layout, fordi det er forudsigeligt overalt. Brug em, når noget skal skalere med komponentens egen tekststørrelse, f.eks. padding inde i en knap.
Hvorfor ikke konvertere media queries til rem?
Det kan du godt, men i en media query svarer 1rem altid til browserens standardskriftstørrelse (normalt 16px), ikke din html-skriftstørrelse. Konverteren springer dem derfor over som standard; slå indstillingen fra, hvis du alligevel dividerer med 16.
Er rem bedre for tilgængelighed end px?
For skriftstørrelser, ja: rem respekterer brugerens indstilling for standardskriftstørrelse, mens px-skriftstørrelser ignorerer den. Browserzoom virker med begge enheder.
Privatliv
Konverteringer og CSS-kodestykket behandles i din browser og sendes aldrig nogen steder hen.