Forstå REM-enheter i CSS: En dybdegående guide
CSS (Cascading Style Sheets) er et fundamentalt språk for å skape grensesnitt i applikasjoner for nett, mobil og datamaskiner. Dette språket lar oss kontrollere utseendet og funksjonaliteten til elementer gjennom en rekke verdier og egenskaper. Blant disse er REM, en enhet som ofte dukker opp når man jobber med styling av nettsider.
I denne artikkelen skal vi utforske REM-enheter i CSS, deres betydning for responsiv typografi, hvordan de beregnes, og fordelene ved å bruke dem.
Hva er REM i CSS?
REM, eller «root em», er en relativ måleenhet som definerer skriftstørrelsen til et element basert på skriftstørrelsen til rotelementet (vanligvis <html>). Siden REM er en relativ enhet, vil alle verdier som bruker den, endre seg i henhold til skriftstørrelsen til dette rotelementet. Som standard er skriftstørrelsen i de fleste nettlesere satt til 16px. Det betyr at hvis rotelementet har en skriftstørrelse på 16px, vil 1 REM være lik 16px.
REM skiller seg fra absolutte enheter, som piksler (px). La oss se på et eksempel:
HTML-kode:
<div>Hei Verden</div>
Og tilhørende CSS:
div {
border: 1.5px solid black;
width: 200px;
}
I dette eksemplet vil bredden på blokken (200px) være konstant, uavhengig av skjermstørrelsen eller andre faktorer. Bredden er altså ikke relatert til andre elementer i HTML-dokumentet.
Det samme gjelder for kantlinjen på containeren, som alltid vil være 1,5 piksler, uavhengig av skjerm eller enhetsendringer.
Betydningen av responsiv typografi i webdesign
Responsiv typografi omfatter mange aspekter, som tekstlayout, størrelse og mellomrom. Her er noen grunner til at responsivt webdesign er viktig:
- Forbedret brukeropplevelse: Brukere foretrekker applikasjoner som er enkle å navigere. En applikasjon som tilpasser seg ulike skjermstørrelser, gir en god og sømløs brukeropplevelse.
- Tilpasning til ulike skjermstørrelser: Responsiv typografi tilpasser seg tilgjengelig plass på skjermen og justerer seg deretter. Dette hindrer at tekst blir for stor på store skjermer eller for liten på små skjermer.
- Bedre lesbarhet: Et godt nettsted skal være lett tilgjengelig og lett å lese. Responsiv typografi sørger for at teksten tilpasser seg skjermstørrelse og -retning.
- Konsistent merkevarebygging: Med økende mengder kode kan det lett oppstå inkonsekvente skriftstiler i en applikasjon. Responsiv design sikrer konsistens uansett skjermstørrelse eller brukeratferd.
- Integrasjon med media queries: Responsiv typografi kan kombineres med media queries, noe som gir webdesignere mulighet til å designe ulike stiler basert på skjermstørrelse og -retning.
- Forbedret tilgjengelighet: Responsiv typografi er et grunnleggende aspekt av tilgjengelighet. Brukere med ulike behov kan justere skjerm- og skriftstørrelser for å tilpasse innholdet.
Hvordan REM-enheter beregnes
REM-enheter beregnes ut fra skriftstørrelsen til <html> elementet, som er «roten». Dette gjør det mulig å skape konsistente og skalerbare design ved å basere alle verdier på en enkelt rotverdi.
Som nevnt er standard skriftstørrelse i de fleste nettlesere 16px, men man kan definere en annen verdi. Hvis vi for eksempel setter skriftstørrelsen til rotelementet til 10px, vil 1 REM tilsvare 10px:
CSS-kode:
html {
font-size: 10px;
}
For å demonstrere dette kan vi bruke følgende HTML-struktur:
<html lang="no">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokument</title>
</head>
<body>
<h2>Velkommen til tipsbilk.net</h2>
</body>
</html>
Denne enkle HTML-strukturen inneholder en overskrift (<h2>) som viser «Velkommen til tipsbilk.net».
Som standard vil skriftstørrelsen være 16px, altså at 1 REM = 16px.
Hvis vi kobler til en CSS-fil, «styles.css» i <head>:
<link rel="stylesheet" href="styles.css">
… og definerer følgende i CSS-filen:
html {
font-size: 10px;
}
Vil skriftstørrelsen for alle elementer, inkludert overskriften, endres i henhold til denne verdien. Nå er 1REM = 10px.
Vi kan endre størrelsen på overskriften med REM-verdier:
h2 {
font-size: 3.5rem; /* Tilsvarer 35 piksler (3.5rem * 10px = 35px) */
}
Overskriften vil nå være 35px, som tilsvarer 3,5 REM.
Fordeler med å bruke REM i CSS
Mange er kjent med piksler (px) og prosenter som måleenheter i CSS. Hvorfor velge REM i stedet for disse? Her er noen fordeler ved å bruke REM:
- Skalerbarhet: REM-enheter er skalerbare siden man kan endre skriftstørrelsen til rotelementet og alle REM-baserte verdier vil endre seg proporsjonalt. I tillegg vil de også tilpasse seg endringer i nettleserens skriftstørrelse.
- Enkel administrering: Ved å endre skriftstørrelsen i <html> eller <body>-taggen, kan man automatisk justere alle REM-enheter. Dette sparer tid og krefter ved å unngå å måtte endre hvert enkelt element individuelt.
- Konsistente størrelser: REM-enheter bidrar til konsistente skriftstørrelser og mellomrom på tvers av hele nettstedet, siden de er basert på rotelementet.
- Responsive design: REM-enheter, brukt sammen med media queries, gir mulighet for design som tilpasser seg ulike skjermstørrelser og enheter. Man kan justere skriftstørrelsen på rotelementet og andre elementer vil justere seg proporsjonalt.
CSS REM vs. EM vs. prosenter
Når man jobber med CSS, møter man enheter som piksler, REM, EM og prosenter. Selv om alle disse brukes til å definere skriftstørrelser og mellomrom, har de ulike bruksområder. La oss se på forskjellene mellom REM og andre enheter:
REM vs EM
Både REM og EM er relative enheter, men REM er relatert til rotelementet (<html>), mens EM er relatert til det overordnede elementet.
La oss si vi har en <div> som er et forelderelement og en annen <div> inni denne som er et barneelement:
<div class="parent">
<p>Dette er forelderelementet.</p>
<div class="child">
<p>Dette er barneelementet.</p>
</div>
</div>
Vi kan definere EM-enheter slik:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
.parent klassen har en skriftstørrelse på 1,5em, og .child elementet har en skriftstørrelse på 1,2em, som er relativt til forelderelementet. Endringer i foreldreelementet vil overføres til barneelementet.
REM vs. prosenter
Prosentenheter er relative til størrelsen eller avstanden til det overordnede elementet. Hvis vi for eksempel har <body> med en skriftstørrelse på 16px, og setter et <p> element til 50%, vil dette tilsvare 50/100 * 16 = 8px.
CSS-kode:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Her er en oppsummering av forholdet mellom REM, EM og prosenter:
| Egenskap | REM | EM | Prosent |
| Relativt til | Rotelement | Foreldreelement | Overordnet element |
| Arv | Fra rot | Fra forelder | Fra forelder |
| Bruksområde | Egnet for konsistente oppsett | Egnet for relative størrelser | Egnet for responsive design |
| Skalerbarhet | Ja | Ja | Relativt |
Når du ikke bør bruke REM-enheter
Selv om REM har mange fordeler, er det noen situasjoner der andre enheter er mer passende:
- Utskrifter: Når man jobber med utskrifter, er det viktig å ha kontroll over de faktiske målene. I slike tilfeller gir tommer eller millimeter mer nøyaktig kontroll.
- Finjustert kontroll: Hvis man ønsker detaljert kontroll over et elements størrelse, spesielt i forhold til foreldreelementet, er ikke REM det beste valget. Absolutte enheter som piksler kan være bedre i disse tilfellene.
- Animasjoner og overganger: REM-enheter er ikke egnet for animasjoner eller overganger der størrelsen skal endres gradvis. Endringer i skriftstørrelsen til rotelementet kan forårsake brå endringer i disse.
- Eldre nettlesere: Noen eldre nettlesere støtter ikke REM-enheter. I slike tilfeller kan prosenter eller piksler være et bedre alternativ.
Konklusjon
Vi håper denne artikkelen har gitt deg en god forståelse av hvordan du bruker REM-enheter i CSS, hvordan de beregnes og når de er mest hensiktsmessige.
REM er relative enheter som bidrar til konsistente skriftstørrelser i applikasjoner. Piksler er derimot absolutte verdier som ikke endres basert på skjermstørrelse eller omkringliggende elementer.
Selv om REM har mange fordeler, er det viktig å huske at andre enheter som prosenter og piksler kan være bedre i visse situasjoner.
For mer informasjon om styling, kan du sjekke ut disse CSS-ressursene.
Takk for din tilbakemelding!