Hvis du har brukt litt tid på å fikle med CSS, har du sikkert stilt deg foran en designskisse og lurt på: «Bør jeg bruke piksler her, eller bør jeg gjøre dette om til en rem-verdi?»
Hvis du jobber med en Full HD-skjermbredde – nærmere bestemt 1920px – og vil gjøre det om til rem, har du kommet til riktig sted. Vi skal gå gjennom det nøyaktige regnestykket, forklare hvorfor det fungerer med en superenkel analogi, og få deg tilbake til kodingen på null komma niks.
Det raske svaret: 1920px til rem
La oss gå rett til poenget. Forutsatt at nettstedet ditt bruker den vanlige standard skriftstørrelsen i nettleseren på 16px, er 1920px nøyaktig 120rem.
Hvordan kom vi frem til det? Det er et enkelt delestykke:
1920 ÷ 16 = 120
Det er alt. Men hvis du vil forstå hvorfor vi deler på 16, hvorfor vi i det hele tatt bryr oss om rem, eller hvordan du kan slippe å gjøre dette regnestykket i det hele tatt, heng med et minutt til.
(Profftips: Hvis du er lei av å ta disse regnestykkene i hodet, kan du bare bokmerke en hendig piksel til rem-konvertering for å gjøre grovarbeidet for deg).
Piksler vs. rem: Bakenanalogien
For å forstå hvorfor webutviklere er så opptatt av rem, hjelper det å gå bort fra datamaskinen og inn på kjøkkenet.
Tenk på piksler (px) som en stiv kakeform i metall. Hvis du har en kakeform på 22 cm, vil den alltid være 22 cm. Det spiller ingen rolle om du baker en kake til to personer eller tyve personer; formen nekter å endre størrelse. I webdesign er en piksel en streng, absolutt enhet. Hvis du setter en boks til 1920px, blir den stående på 1920px, selv om brukeren ser på den på en liten smarttelefon eller har dårlig syn og må zoome inn på alt.
Rem, derimot, er som en fleksibel oppskrift. Forestill deg en pannekakeoppskrift som ber om «1 kopp mel per person». Hvis én person skal spise, bruker du 1 kopp. Hvis fire personer skal spise, skalerer den automatisk til 4 kopper.
I CSS står rem for «root em» (rotelement-em). Den ser på roten (grunnleggende skriftstørrelse som brukeren har angitt i nettleseren sin) og skalerer alt proporsjonalt derfra.
Det magiske tallet: 16
Som standard setter stort sett alle nettlesere rotstørrelsen for skrift til 16px.
Så når du forteller CSS at en beholder skal være 1rem bred, sier nettleseren: «Okei, grunnstørrelsen er 16px. La oss gjøre denne beholderen 16px bred.»
Hvis du vil ha en Full HD-innpakning (wrapper) som er 1920 piksler bred, spør du deg selv: «Hvor mange ganger går 16 opp i 1920?»
1920 ÷ 16 = 120
Du skriver max-width: 120rem; i stilarket ditt, og så er du klar. Og hei, hvis du noen gang må regne baklengs (som når du leser noen andres kode og lurer på hva i alle dager 120rem tilsvarer i vanlige skjermpiksler), kan du alltid bruke en rem til piksel-konvertering for å finne ut av det.
Hvorfor bør du bry deg? (Tilgjengelighetsvinkelen)
Du tenker kanskje: «Matte er irriterende. Hvorfor kan jeg ikke bare skrive 1920px og si meg ferdig?»
Det kan du absolutt gjøre. Men ved å bygge med rem gjør du nettstedet ditt utrolig vennlig for brukere som må zoome inn. Hvis en svaksynt bruker endrer standard skriftstørrelse i nettleseren fra 16px til 24px, vil et nettsted som er bygget kun med px hardnakket bli stående i samme størrelse. Det fører ofte til at tekst overlapper eller blir uleselig.
Hvis du bygde nettstedet med rem, vil hele layouten «puste» og skalere seg perfekt opp i tråd med brukerens innstillinger. Det er nærmest magisk, og det får deg til å fremstå som en dyktig utvikler som faktisk bryr seg om tilgjengelighet og universal utforming.
Din raske huskeliste for CSS
Hvis du ikke vil ta frem kalkulatoren hver eneste gang du skriver CSS, er det en rask oversikt her basert på standard 16px rotstørrelse.
Formelen: Ønsket pikselstørrelse ÷ 16 = rem-verdi
- 16px = 1rem (Utgangspunktet)
- 24px = 1.5rem
- 32px = 2rem (Flott for standard overskrifter)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Vanlig brekkpunkt for nettbrett)
- 1024px = 64rem (Vanlig brekkpunkt for dataskjerm)
- 1440px = 90rem (Stor dataskjerm)
- 1920px = 120rem (Full HD-skjerm)
Neste gang du sitter og ser på et design på 1920px, er det bare å huske på den fleksible oppskriften. Del på 16, legg inn 120rem, og fortsett å bygge fantastiske ting!