PX vs. REM vs. EM | Hvilken CSS-enhed bør du bruge?
Lad os være ærlige et øjeblik – at finde ud af, hvordan man dimensionerer ting i CSS, kan føles som at lære et helt andet sprog. Du sætter dig ned for at style en simpel webside, og pludselig stirrer du på en alfabet-suppe af enheder.
“Skal dette afsnit være 16px? Eller 1rem? Vent, hvad er en em egentlig?”
Hvis du nogensinde har taget dig selv i at gætte tilfældigt på enheder, indtil dit layout endelig ser rigtigt ud, er du bestemt ikke alene. Det er nærmest et overgangsritual for enhver frontend-udvikler. Men når du først forstår, hvordan disse tre enheder rent faktisk fungerer bag kulisserne, holder CSS op med at føles som sort magi og begynder at føles som en forudsigelig værktøjskasse.
Lad os gennemgå px, em og rem uden alt for meget fagjargon, ved hjælp af nogle analogier fra den virkelige verden for at få det hele til at give mening.
Pixels (px): Den stædige lineal
Tænk på en pixel som et skræddersyet jakkesæt lavet af et stof, der aldrig strækker sig. Hvis du fortæller en knap, at den skal have en bredde på 200px og en tekststørrelse på 16px, er det præcis det, du får. Punktum. Det er en absolut enhed.
Pixels er ærlig talt ligeglade med, om du ser siden på en massiv 4K-skærm, en lille fem år gammel smartphone, eller om brugeren har skruet op for browserens standard skriftstørrelse, fordi de har glemt deres læsebriller. En pixel er en pixel.
Det gode: De er forudsigelige. Du ved præcis, hvad du får, hvilket gør dem utroligt nemme at arbejde med, når du bygger nøjagtige layouts. Det dårlige: De er forfærdelige for tilgængelighed. Hvis du hårdkoder dine skriftstørrelser i pixels, og en svagtseende bruger forsøger at skalere browserens standard skriftstørrelse op, nægter din 16px tekst stædigt at vokse.
Ems (em): Hviskeleg
Hvis pixels er stive, er em-enheder det stik modsatte. (Sjov fakta: navnet stammer fra et traditionelt typografisk mål, der oprindeligt var baseret på bredden af det store bogstav “M”!). En em er en relativ enhed, hvilket betyder, at den baserer sin størrelse på sine omgivelser – specifikt sit direkte forælderelement.
Tænk på em-enheder som at lege hviskeleg, eller måske som russiske babushka-dukker. Hvis en forældre-container har en skriftstørrelse på 16px, og du giver et underordnet element en skriftstørrelse på 2em, vil barnet være dobbelt så stort som forælderen (altså 32px).
Lyder det ikke godt? Lige indtil du begynder at indlejre dem.
Lad os sige, at du har en liste, inde i en liste, inde i en liste. Hvis du sætter alle li-tags til 1.5em, er den første liste 1,5x normal størrelse. Den indlejrede liste er 1,5x den størrelse. Den tredje liste er 1,5x den størrelse. Pludselig råber din tekst til brugeren med massive bogstaver, der fylder hele skærmen. Dette kaldes “compounding-problemet”, og det er grunden til, at mange udviklere løber skrigende væk fra em-enheder.
Fordi matematikken kan blive mærkeligt kompliceret, når du indlejrer elementer, har du virkelig ikke lyst til at regne det ud i hovedet. Gør dig selv en kæmpe tjeneste og gem en pixel til em-konverter i dine bogmærker for at bevare din forstand, når tingene bliver svære.
Rems (rem): At indstille dit ur efter Greenwich Mean Time
rem-enheden blev opfundet specifikt for at løse compounding-mareridtet ved em.
“Rem” står for Root Em. I stedet for at kigge på sit direkte forælderelement for at finde ud af, hvor stort det skal være, kigger en rem hele vejen op til toppen af websiden: “roden” (<html>-elementet).
Tænk på rem-enheder som at indstille dit ur efter en global standard som Greenwich Mean Time. Det er lige meget, hvor du er i verden (eller hvor dit element er gemt dybt i HTML-træet); alle refererer til det samme ur.
Som standard indstiller de fleste browsere rod-skriftstørrelsen til 16px. Så 1rem svarer til 16px. 2rem er 32px. 0.5rem er 8px. Hvis du ikke har lyst til at lave hovedregning hver gang, du skal oversætte en designfil til kode, så brug en praktisk pixel til rem-konverter for at fremskynde din arbejdsgang.
Den absolutte magi ved rem: Hvis en bruger går ind i sine browserindstillinger og ændrer sin standard tekststørrelse til 24px, fordi de har brug for større tekst, skaleres hele dit websted automatisk smukt og proportionelt. Hvorfor? Fordi alt bygget med rem-enheder er baseret på det rod-tal!
Så hvilken skal du egentlig bruge?
Her er hemmeligheden: Du behøver ikke vælge én og droppe de andre. De bedste udviklere bruger alle tre, men de bruger dem til meget specifikke opgaver.
Her er præcis, hvordan du bør gribe det an:
1. Brug som udgangspunkt rem til næsten alt.
Skriftstørrelser, marginer, padding, max-bredder – brug rem. Det gør dit websted utroligt tilgængeligt og sikrer, at alt skaleres proportionelt, hvis brugeren ændrer sine browserindstillinger. Det er den ubestridte guldstandard for moderne webdesign.
2. Brug px til ting, der aldrig skal skalere.
Hvis du laver en tynd 1px kant omkring et kort, vil du sandsynligvis ikke have, at den kant bliver til en tyk, grim 3px blok, bare fordi brugeren har øget sin skriftstørrelse. Brug px til kanter, box-shadows og lejlighedsvis til præcis placering i drilske layouts.
3. Brug em til modulære komponenter.
Brug em, når du ønsker, at afstanden skal skalere specifikt med skriftstørrelsen på netop det element. Forestil dig for eksempel en knap. Du vil have, at padding omkring teksten altid ser proportionel ud, uanset om det er en kæmpe “Køb nu”-knap eller en lille “Indsend”-knap. Hvis du indstiller knappens padding i em, kan du nøjes med at ændre knappens skriftstørrelse, og så vil padding automatisk vokse eller skrumpe, så det passer perfekt.