PX vs. REM vs. EM | Hvilken CSS-enhet bør du bruke?
La oss være ærlige et øyeblikk – å finne ut hvordan man angir størrelser i CSS kan føles som å lære et helt nytt språk. Du setter deg ned for å style en enkel nettside, og plutselig stirrer du på en alfabetsuppe av enheter.
«Bør dette avsnittet være 16px? Eller 1rem? Vent, hva er egentlig en em?»
Hvis du noen gang har tatt deg selv i å gjette tilfeldige enheter helt til layouten din endelig ser riktig ut, er du definitivt ikke alene. Det er nærmest et overgangsrituale for enhver frontend-utvikler. Men når du først forstår hvordan disse tre enhetene faktisk fungerer bak kulissene, slutter CSS å føles som mørk magi og begynner å føles som en forutsigbar verktøykasse.
La oss bryte ned px, em og rem uten for mye sjargong, ved hjelp av noen analogier fra den virkelige verden for å få det til å løsne.
Piksler (px): Den sta linjalen
Tenk på en piksel som en skreddersydd dress laget av et stoff som aldri strekker seg. Hvis du ber en knapp om å ha en bredde på 200px og en tekststørrelse på 16px, er det nøyaktig det du får. Ferdig snakka. Det er en absolutt enhet.
Piksler bryr seg ærlig talt ikke om du ser på siden på en massiv 4K-skjerm, en liten fem år gammel smarttelefon, eller om brukeren har skrudd opp nettleserens standard skriftstørrelse fordi de glemte lesebrillene sine. En piksel er en piksel.
Det positive: De er forutsigbare. Du vet nøyaktig hva du får, noe som gjør dem utrolig enkle å forholde seg til når du bygger nøyaktige layouter. Det negative: De er dårlige for universell utforming (tilgjengelighet). Hvis du hardkoder skriftstørrelsene dine i piksler, og en svaksynt bruker prøver å skalere opp nettleserens standard skriftstørrelse, vil din 16px tekst nekte plent å vokse.
Ems (em): Viskeleken
Hvis piksler er stive, er em-enheter det stikk motsatte. (Fun fact: navnet kommer fra et tradisjonelt typografisk mål som opprinnelig var basert på bredden til den store bokstaven «M»!). En em er en relativ enhet, noe som betyr at den baserer størrelsen på omgivelsene sine – spesifikt sitt direkte foreldre-element.
Tenk på em-enheter som å leke viskeleken, eller kanskje som russiske babusjka-dukker. Hvis en foreldre-beholder har en skriftstørrelse på 16px, og du gir et barne-element en skriftstørrelse på 2em, vil barnet bli dobbelt så stort som forelderen (altså 32px).
Høres bra ut, ikke sant? Helt til du begynner å nøste dem inni hverandre.
La oss si at du har en liste, inni en liste, inni en liste. Hvis du setter alle li-taggene til 1.5em, er den første listen 1,5 ganger normal størrelse. Den nøstede listen er 1,5 ganger den størrelsen igjen. Den tredje listen er 1,5 ganger den størrelsen igjen. Plutselig skriker teksten din til brukeren med massive bokstaver som fyller hele skjermen. Dette er kjent som «compounding-problemet» (opphopningsproblemet), og det er grunnen til at mange utviklere løper skrikende bort fra em-enheter.
Fordi matematikken kan bli merkelig komplisert når du nøster elementer, vil du helst slippe å regne ut dette i hodet. Gjør deg selv en stor tjeneste og bokmerk en Piksler til em omformer for å bevare forstanden når ting blir vrient.
Rems (rem): Å stille klokken etter Greenwich Mean Time
rem-enheten ble oppfunnet spesifikt for å fikse det nøstede marerittet med em.
«Rem» står for Root Em. I stedet for å se på sitt umiddelbare foreldre-element for å finne ut hvor stort det skal være, ser en rem helt opp til toppen av nettsiden: roten (<html>-elementet).
Tenk på rem-enheter som å stille klokken etter en global standard som Greenwich Mean Time. Det spiller ingen rolle hvor i verden du er (eller hvor dypt elementet ditt er nøstet i HTML-treet); alle refererer til nøyaktig samme klokke.
Som standard setter de fleste nettlesere rot-skriftstørrelsen til 16px. Dermed tilsvarer 1rem 16px. 2rem tilsvarer 32px. 0.5rem tilsvarer 8px. Hvis du ikke har lyst til å drive med hoderegning hver gang du skal oversette en designfil til kode, kan du bare bruke en hendig Piksler til rem omformer for å få opp farten på arbeidsflyten din.
Den absolutte magien med rem: Hvis en bruker går inn i nettleserinnstillingene sine og endrer standard tekststørrelse til 24px fordi de trenger større tekst, vil hele siden din automatisk skaleres opp vakkert og proporsjonalt. Hvorfor? Fordi alt som er bygget med rem-enheter er basert på det rottallet!
Så, hvilken bør du egentlig bruke?
Her er hemmeligheten: du trenger ikke velge bare én og forkaste de andre. De beste utviklerne bruker alle tre, men de bruker dem til veldig spesifikke oppgaver.
Her er nøyaktig hvordan du bør gripe det an:
1. Bruk rem som standard for nesten alt.
Skriftstørrelser, marger, utfylling (padding), maks-bredder – bruk rem. Det gjør siden din utrolig tilgjengelig og sikrer at alt skaleres proporsjonalt hvis brukeren justerer nettleserinnstillingene sine. Det er den ubestridte gullstandarden for moderne webdesign.
2. Bruk px for ting som aldri skal skaleres.
Hvis du legger en tynn 1px ramme (border) rundt et kort, vil du sannsynligvis ikke at den rammen skal bli en klumpete, stygg 3px blokk bare fordi brukeren økte skriftstørrelsen sin. Bruk px for rammer, boksskygger (box shadows), og av og til for presis posisjonering i vriene layouter.
3. Bruk em for modulære komponenter.
Bruk em når du vil at avstanden skal skaleres spesifikt med skriftstørrelsen til akkurat det elementet. For eksempel, se for deg en knapp. Du vil at utfyllingen rundt teksten alltid skal se proporsjonal ut, enten det er en enorm «Kjøp nå»-knapp eller en liten «Send»-knapp. Hvis du setter knappens padding i em, kan du bare endre skriftstørrelsen på knappen, så vil paddingen automatisk vokse eller krympe for å matche perfekt.