Hvordan konvertere piksler til rem i CSS (enkel guide)

Har du noen gang bygget et nydelig, piksel-perfekt nettsted, bare for å innse at det ser helt ødelagt ut i det øyeblikket en bruker øker nettleserens standard skriftstørrelse? Jepp, jeg også. Det er vanligvis akkurat da vi utviklere lærer på den harde måten at det å hardkode piksler (px) for absolutt alt er en oppskrift på et tilgjengelighetsmareritt.

Her kommer rem-enheten inn i bildet.

Hvis du er vant til å tenke utelukkende i piksler, kan overgangen til rem føles litt som å prøve å lære et fremmedspråk i farten. Men ikke bekymre deg – når du først forstår konseptet, gjør det faktisk livet ditt som utvikler mye enklere.

La oss bryte ned hvordan du konverterer px til rem uten å trenge en grad i matematikk.

Hvorfor snakker vi egentlig om rem?

Tenk på piksler som et absolutt mål. Se for deg at du bygger et hus og sier til entreprenøren: «Gjør dette vinduet nøyaktig 40 tommer bredt.» Det vinduet kommer til å være 40 tommer bredt uansett hva som skjer med resten av huset. Det er en piksel.

Tenk nå på rem som et relativt mål. I stedet for å bruke faste tommer, sier du til entreprenøren: «Gjør dette vinduet nøyaktig 3 ganger så bredt som standard grunnmursstein.» Hvis du bestemmer deg for å bruke større stein senere, vil vinduet automatisk skaleres opp proporsjonalt.

I CSS står rem for «root em.» Det betyr rett og slett «relativ til rot-HTML-elementets skriftstørrelse.» Fordi brukere kan (og gjør) gå inn i nettleserinnstillingene sine for å endre standard skriftstørrelse for lesbarhet, betyr bruk av rem at hele nettstedet ditt vil skaleres sømløst for å samsvare med deres preferanser. Layouten din vil ikke gå i stykker, og teksten forblir perfekt lesbar. Vinn-vinn.

Standardmatematikken: Slik konverterer du

Her er den gylne regelen du må huske: Som standard setter nesten alle moderne nettlesere sin rot-skriftstørrelse til 16px.

Dette betyr at med mindre du spesifikt overstyrer det i CSS-en din, tilsvarer 1rem 16px.

For å konvertere en hvilken som helst pikselverdi du har i hodet til en rem-verdi, bruker du bare denne enkle formelen:

Mål-pikselverdi ÷ Grunnpikselverdi (16) = rem-verdi

La oss si at du ser på et Figma-design, og du trenger at en overskrift skal være 24px. Du deler bare 24 på 16.

24 ÷ 16 = 1.5
Så i CSS-en skriver du: font-size: 1.5rem;

Trenger du en mindre bildetekst som er 14px?

14 ÷ 16 = 0.875
Så du skriver: font-size: 0.875rem;

Hør her, jeg skjønner det. Å drive med divisjon i hodet mens du er dypt inne i kodingen er en skikkelig stemningsdreper. Hvis du heller vil hoppe over den mentale gymnastikken helt, anbefaler jeg på det sterkeste å ha et verktøy som denne Piksler til rem omformer åpen i en fane. Du taster bare inn pikslene dine, og den gjør grovarbeidet for deg umiddelbart.

62,5 %-trikset (Gjør matematikken utrolig enkel)

Hvis du ikke vil bruke kalkulator for hver eneste linje med CSS, har utviklere kommet opp med et lurt lite hack kalt 62,5 %-trikset.

Slik fungerer det. Du setter rot-html-skriftstørrelsen til 62.5% helt øverst i stilarket ditt:

html {
  font-size: 62.5%;
}

Hvorfor 62,5 %? Fordi 62,5 % av standard 16px er nøyaktig 10px.

Ved å gjøre dette har du i bunn og grunn redefinert din «standard grunnmursstein» til å være nøyaktig 10px. Plutselig blir matematikken latterlig enkel. I stedet for å dele på 16, deler du bare på 10 (som bare betyr å flytte desimaltegnet ett hakk til venstre).

Vil du ha 24px? Bare skriv 2.4rem.
Vil du ha 14px? Bare skriv 1.4rem.
Vil du ha 36px? Bare skriv 3.6rem.

Det føles som magi. Bare husk at hvis du hopper inn i et eksisterende prosjekt der rot-skriftstørrelsen ikke er endret, må du fortsatt stole på den vanlige del-på-16-matematikken.

Den ultimate jukselappen for px til rem

Enten du deler på 16 manuelt eller bare trenger en hurtigreferanse på din andre skjerm, er her en jukselapp for de vanligste skriftstørrelsene (forutsatt standard nettleserstørrelse på 16px):

Hva du vil ha (px)	Hva du skriver (rem)	Matematikken som brukes
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Grunnstørrelse)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

Ett siste tips før du drar

Du trenger ikke å bruke rem til absolutt alt. Det er fantastisk for skriftstørrelser, marger (margins), utfylling (padding) og layoutbredder. Men for små dekorative ting som en tynn 1px ramme (border: 1px solid black), er det helt greit – og vanligvis foretrukket – å bare holde seg til standard piksler!

Gå ut og kod ansvarlig. Brukerne dine (og synet deres) vil takke deg.