La oss være ærlige et øyeblikk: å sette størrelser i CSS pleide å være en enorm hodepine. Du bygget et vakkert nettsted på laptopen din, men i det øyeblikket noen så på det på en mobil eller zoomet inn, ble hele layouten ødelagt.
Her kommer enheten rem inn i bildet. Hvis du har syslet litt med webdesign, har du sikkert sett den overalt. Men hva er egentlig en rem, og enda viktigere: hvordan i alle dager finner nettleseren ut hvilken størrelse den faktisk tilsvarer på skjermen?
Slapp av, det kreves ingen avansert matematikk her. Hent kaffekoppen, og la oss se nærmere på hvordan nettlesere beregner rem-enheter, ved hjelp av noen enkle eksempler fra den virkelige verden.
Hva står egentlig REM for?
rem står for «root em».
Hvis du vil dykke dypere ned i historien om typografiske måleenheter, har Wikipedia en fascinerende gjennomgang av em-enheten og dens fysiske opprinnelse fra gamle dagers trykkpresser.
Men for moderne webdesign trenger du egentlig bare å forstå «root»-delen (roten).
Se for deg et tre. Roten er basen som gir næring til resten av treet. I et HTML-dokument er roten selve <html>-taggen. Så en rem-enhet ser rett og slett på skriftstørrelsen til <html>-taggen (roten) og bruker den som utgangspunkt.
Analogien om «grunnoppskriften»
Tenk på rem som å skalere en grunnoppskrift på kjøkkenet.
La oss si at bestemors grunnoppskrift gir nøyaktig 16 sjokoladekjeks.
-
Hvis du vil doble porsjonen, ganger du oppskriften med 2. Da får du 32 kjeks.
-
Hvis du bare vil ha en halv porsjon, ganger du den med 0,5. Da får du 8 kjeks.
rem-enheter fungerer akkurat på samme måte. Nettleserens standard skriftstørrelse for roten er vanligvis 16px (vår grunnoppskrift).
Så når du skriver 2rem i CSS-koden din, gjør nettleseren et raskt regnestykke:
16px (base) × 2 (rem-verdi) = 32px.
Det er faktisk så enkelt!
La oss se på noen enkle eksempler
La oss anta at nettstedet ditt bruker nettleserens standard skriftstørrelse på 16px for roten. Slik oversetter nettleseren din rem-CSS til piksler:
-
Brødtekst (
1rem): 16px × 1 = 16px -
En stor overskrift (
2.5rem): 16px × 2,5 = 40px -
Liten bunntekst (
0.875rem): 16px × 0,875 = 14px
Men hva skjer hvis du endrer rot-størrelsen?
La oss si du bestemmer deg for at 16px er for lite, så du skriver dette i CSS-koden din:
html {
font-size: 20px;
}Nettleseren oppdaterer umiddelbart regnestykket for hele nettstedet. Den har byttet ut grunnoppskriften. Nå tilsvarer de samme rem-verdiene noe helt annet:
-
1remer nå 20px (20 × 1) -
2.5remer nå 50px (20 × 2,5) -
0.875remer nå 17,5px (20 × 0,875)
Ved å endre bare én linje med kode, skaleres hele nettstedet ditt perfekt. Magisk, ikke sant?
REM vs EM: Det russiske dukke-problemet
Du lurer kanskje på: «Hvorfor ikke bare bruke em?»
Mens rem forholder seg til rot-elementet, ser vanlige em-enheter på skriftstørrelsen til sitt eget foreldre-element (parent). Dette høres greit ut helt til du begynner å nøste ting inni hverandre, som en liste inni en <div> inni en annen <div>.
Å bruke em-enheter er som å leke med russiske babusjkadukker. Hvis et foreldreelement er 1.2em, barnet er 1.2em, og barnebarnet er 1.2em, ganger nettleseren alle sammen med hverandre (1,2 × 1,2 × 1,2). Plutselig blir teksten din gigantisk, og du aner ikke hvorfor!
Fordi rem alltid tar utgangspunkt i det ene rot-elementet, får du aldri denne kumulative snøballeffekten. Det er forutsigbart, trygt, og gjør at du slipper å rive deg i håret.
Hvorfor nettlesere (og brukere) elsker REM
Du tenker kanskje: «Hvis 1rem bare er 16px, hvorfor skriver jeg ikke bare 16px og slipper unna regningen?»
Svaret er universell utforming.
Mange går inn i nettleserinnstillingene sine og endrer standard skriftstørrelse fra 16px to 20px eller til og med 24px for å kunne lese mer behagelig.
-
Hvis du har bygget nettstedet ditt utelukkende med
px, er teksten din låst fast. Brukerens innstillinger blir ignorert, og de kan kanskje ikke lese innholdet ditt. -
Hvis du har bygget nettstedet med
rem, sier nettleseren: «Ah! Brukeren har endret rot-størrelsen til 24px!» Den beregnerrem-verdiene dine på nytt basert på det nye utgangspunktet på 24px, og hele nettstedet ditt skaleres vakkert for å tilpasse seg dem.
Din raske jukselapp for REM
For å slippe å regne hver gang du skriver CSS, har du en hendig jukselapp her basert på standarden på 16px. Bokmerk gjerne denne!
| Nettleserens regnestykke | Det du skriver (i rem) | Det du vil ha (i piksler) |
16 × 0.75 | 0.75rem | 12px |
| 16 × 0.875 | 0.875rem | 14px |
| 16 × 1 | 1rem (Base) | 16px |
| 16 × 1.125 | 1.125rem | 18px |
| 16 × 1.25 | 1.25rem | 20px |
| 16 × 1.5 | 1.5rem | 24px |
| 16 × 2 | 2rem | 32px |
| 16 × 3 | 3rem | 48px |
| 16 × 4 | 4rem | 64px |
(Profftips: Hvis du beregner dette selv, tar du bare den ønskede pikselstørrelsen og deler den på 16. For eksempel: 24px ÷ 16 = 1.5rem).
Hvis du heller vil slippe regningen helt og spare tid, kan du alltids bruke vår gratis rem til piksel-konverterer for å beregne de nøyaktige størrelsene umiddelbart!
Oppsummering
Og der har du det! Nettlesere beregner rem-enheter helt enkelt ved å gange rem-verdien din med skriftstørrelsen til roten. Det er bare en skalerbar oppskrift som holder koden din ryddig, forhindrer mareritt med størrelser, og gjør nettet til et mye hyggeligere sted for alle som prøver å lese innholdet ditt.
Har du noen spesifikke elementer på nettstedet ditt der du sliter med å gå over fra px til rem? Si ifra, så kan vi løse regnestykket sammen!