CSS Unit Guide: CSS em, rem, vh, vw og mere, forklaret
Enheder
Mange CSS egenskaber kan lide width
, margin
, padding
, font-size
osv tage længde. CSS har en måde at udtrykke længde i flere enheder. Længde er en kombination af et tal og enheden uden hvidt mellemrum. F.eks 5px
. 0.9em
Osv.
Længde
Fælles længde enheder
Der er flere enheder, der bruges af CSS til at udtrykke længde. De ældre, understøttet af alle browsere, er:
- rem - “r” står for “root”: “root em” -, hvilket svarer til skriftstørrelsen, der er fastgjort til rodelementet (næsten altid
).
- vh og vw - Mange responsive webdesignteknikker er stærkt afhængige af procentvise regler. Imidlertid er CSS-procentmål ikke altid den bedste løsning på alle problemer. Mål vh er lig med 1/100 af visningsportens højde. Så hvis f.eks. Browserens højde er 800 px, svarer 1vh til 8 pixel, og hvis bredden på visningsområdet er 650 pixel, svarer 1vh til 6,5 pixel.
- vmin og vmax - Disse enheder er relateret til den maksimale eller minimale værdi af vh og vw . For eksempel, hvis browseren var indstillet til 1200 pixel bred og højden 600 pixel, ville 1vmin være 6 pixel og 1 vmax ville være 12 pixel. Men hvis bredden blev indstillet til 700 pixel og højden sat til 1080 pixel, ville vmin være lig med 7 pixel og vmax 10,8 pixel.
- ex og ch - Disse enheder svarer til em og rem afhænger af den aktuelle skrifttype og skriftstørrelse. Men i modsætning til em og rem er disse enheder også afhængige af,
font-family
da de bestemmes baseret på specifikke mål for hver skrifttype. Den ch enhed ( ”karakter enhed”) er defineret som bredden af nultegnet ( ”0”). Den ex enhed defineres som ”de aktuelle x-højden af den aktuelle skrifttype eller halvdelen af 1em”. Højde-x for en given skrifttype er højden af små bogstaver "x" for den pågældende skrifttype. Det er ofte det midterste mærke for skrifttypen.

Der er to generelle slags enheder, der bruges til længde og størrelse i CSS: relativ og absolut.
Relative enheder
Relative enheder skifter i forhold til elementets aktuelle skriftstørrelse eller andre indstillinger. Nogle relative enheder er
em
- bredden på et stort bogstav M
font-size
på det aktuelle element. - Skriftstørrelser arves fra overordnede elementer.
Eksempel:
div { font-size: 16px; } div h3 { font-size: 2rem; }
Her er
vil være lig med, 32px
da det font-size
aktuelle eller det overordnede element er 16px
.
rem
- rod
em
eller bredden på et stort bogstav M i standardbasenfont-size
. - Forældres skriftstørrelser har ingen effekt.
Eksempel:
body { font-size: 16px; } p { font-size: 1.5rem; }
Her er
vil være lig, 24px
da standardbasen font-size
er 16px
.
%
- procentstørrelsen i forhold til en forældres størrelse.
Eksempel:
div { width: 400px; } div p { width: 75%; }
Da forældrenes bredde er 400px
, ville bredden af den indre pargraf være 300px
eller 75% af 400px
.
vw
- visningsbredde eller 1/100 af bredden af visningen
Eksempel:
body { width: 100vw; }
Den body
fylde bredden af viewporten, om dette er 417px, 690px, eller enhver bredde.
vh
- sehøjde eller 1/100 af visningens højde
Eksempel:
div { height: 50vh; }
Dette div
udfylder halvdelen af visningen, uanset om det er 1080px, 1300px eller en hvilken som helst højde.
Absolutte enheder
Absolutte enheder vil være de samme uanset skærmstørrelse eller andre indstillinger. Nogle absolutte enheder er
px
- pixel
- pixeltællinger er i forhold til kvaliteten af visningsenhedens skærm
in
, cm
,mm
- tomme, centimeter, millimeter
- En tomme er en tomme på en lille skærm eller en stor skærm
pt
, pc
- point (1/72 tomme) og picas (12 point)
Eksempel
p { font-size: 24px; } div { width: 3in; border-width: 3pt; }
Et afsnit med font-size: 24px
vises som 24 px på en telefon, tablet eller skrivebordsskærm.
Den div
vises som 3 inches bred, og den border
på div
vil være 3/72 af en tomme tyk, uanset skærmstørrelse.