CSS Academy · Lektion

Relative enheder: em og rem

Tilpas elementers størrelse i forhold til forælderens eller rodens skriftstørrelse med enhederne em og rem.

Lektion 2 af 413 trin

Relative enheder: em og rem er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad er relative enheder?

Relative enheder skalerer ud fra et andet mål — som regel skriftstørrelsen for et element eller rodelementet. De gør det muligt at lave skalerbare, responsive designs, der respekterer brugerens indstillinger.

em — Relativ til det overordnede elements skriftstørrelse

em er relativ til det aktuelle elements skriftstørrelse (for selve font-size) eller det overordnede element (for andre egenskaber). Det kan medføre kumulativ skalering.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em til afstande

Når em bruges til padding, margin eller border-radius, er den relativ til elementets egen skriftstørrelse. Det skaber komponenter, der skalerer proportionalt.

<button class="button">Padded Button</button>

rem — Relativ til rodelementets skriftstørrelse

rem (rodelement-em) er relativ til rodefelementets skriftstørrelse (html). Den akkumuleres aldrig og er forudsigelig på hele siden.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem og brugerens tilgængelighed

Hvis brugeren øger browserens grundskriftstørrelse (f.eks. fra 16px til 20px for bedre læsbarhed), skaleres rem-enheder tilsvarende. Faste px-enheder gør ikke. Derfor anbefales rem stærkt til typografi.

html-skriftstørrelse i procent

Angiv rodelementets skriftstørrelse som en procentdel for at respektere brugerens browserindstillinger:

<p>Root font-size respects the browser/user default (100%).</p>

Valg mellem em og rem

Praktisk vejledning:

Brug rem til skriftstørrelser, afstandstokens og layoutmål
Brug em til intern afstand i komponenter, der skal skalere med komponentens skriftstørrelse (f.eks. padding på en knap)

em i medieforespørgsler

Medieforespørgsler angivet i em reagerer på ændringer i browserens skriftstørrelse. Et brudpunkt på 48em svarer til 768px med standardindstillinger, men tilpasser sig, hvis brugeren har ændret sin grundskriftstørrelse.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Beregning af em

Formlen er: ønskede px / overordnede px = em-værdi. Hvis det overordnede element er 16px, og du ønsker tekst på 24px: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Problemet med kumulativ em

Når elementer med em-størrelser indlejres, akkumuleres skriftstørrelsen multiplikativt. Derfor foretrækkes rem til skriftstørrelse — den refererer altid til rodelementet og forhindrer kumulativ skalering.

ch — Tegnbredde

Enheden ch svarer til bredden af tegnet "0" i den aktuelle skrifttype. Den er nyttig til at begrænse tekstbeholdere til læsbare linjelængder:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Hurtigt tjek

En knap har font-size: 1.25rem og padding: 0.5em. Hvis rodelementets skriftstørrelse er 16px, hvor mange pixels er padding så?

Besvar den i den interaktive lektion

Opsummering

em skalerer i forhold til det aktuelle elements skriftstørrelse (eller det overordnede element for selve font-size) — den kan akkumuleres. rem skalerer altid i forhold til rodelementet og akkumuleres aldrig. Brug rem til typografi og globale afstande; brug em til proportional intern afstand i komponenter.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Relative enheder: em og rem” gratis?

Ja — hele teksten til “Relative enheder: em og rem” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Relative enheder: em og rem”?

Tilpas elementers størrelse i forhold til forælderens eller rodens skriftstørrelse med enhederne em og rem. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Relative enheder: em og rem”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til CSS Academy