Hva er PX, %, EM og REM?

Du vi stadig komme over at du har et valg i forhold til hva du skal bruke for å bestemme bredde, høyde eller størrelse på elementer.

‍

Når du bygger nettsider, må du velge hvilke enheter du skal bruke for å bestemme størrelsen på elementer. Siden moderne nettsider skal være responsive (tilpasse seg skjermen), er det ofte bedre å bruke relative enheter som REM, %, VH og VW istedenfor faste piksler (PX).

Enhetene forklart:

• PX (Piksler): En fast enhet. Den endrer seg ikke selv om skjermen blir mindre eller brukeren zoomer i nettleseren.
• REM (Root EM): Relativ til rot-elementet (HTML). Som standard er 1rem = 16px. Dette er den anbefalte enheten for tekst.
• EM: Relativ til skriftstørrelsen på elementets "forelder". Hvis forelderen har 20px skrift, vil 1em inni dette elementet være 20px.
• % (Prosent): Relativ til størrelsen på forelderelementet.
• VW (Viewport Width): Relativ til skjermens bredde. 100vw er hele bredden.
• VH (Viewport Height): Relativ til skjermens høyde. 100vh er hele høyden.

Slik regner du om fra PX til REM

Siden 16px er standard, kan du bruke denne formelen:

Piksler / 16 = REM

• 32px / 16 = 2rem
• 50px / 16 = 3.125rem

En god regel (Best Practice)

1. Tekst: Bruk alltid REM. Dette er viktig for tilgjengelighet, slik at svaksynte som har endret standardstørrelsen i nettleseren sin får en nettside som skalerer riktig.
2. Layout/Containere: Bruk % eller VW/VH for å fylle skjermen riktig.
3. Padding/Margin: Her kan du variere mellom REM (for faste mellomrom som følger teksten) og % (for mellomrom som skal krympe på små skjermer).

‍

Hvorfor EM kan være "skummelt" (Nøstede elementer)

Se for deg at du har tre bokser inni hverandre, og du setter alle til 1.5em:

1. Boks 1 (Forelder): 16px * 1.5 = 24px
2. Boks 2 (Inni boks 1): 24px * 1.5 = 36px
3. Boks 3 (Inni boks 2): 36px * 1.5 = 54px

Resultat: Teksten i den innerste boksen blir gigantisk! Hvis du hadde brukt 1.5rem på alle tre, ville teksten vært nøyaktig 24px i alle boksene.

Når bør du bruke hva?

• Bruk REM: Til nesten alt av tekst, marginer og padding. Det gir deg full kontroll og gjør at siden din ikke "løper løpsk" i størrelsene.
• Bruk EM: Kun når du vil at noe skal stå i stil til teksten akkurat der den er. For eksempel: Hvis du lager en knapp, kan du bruke EM på paddingen. Da vil mellomrommet rundt teksten i knappen automatisk bli større hvis du øker skriftstørrelsen på selve knappen.