Size Does Matter
Størrelsesenheter i CSS
Markus Rauhut
🍆
Absolutte enheter
Egenskaper
- Ikke i forhold til noe annet
- "Alltid" lik størrelse
- Brukes nesten utelukkende til print
Enheter
- px (1px = 1/96in)
- pt
- cm (1cm = 38px)
- in (1in = 2.54cm = 96px)
- mm
- pc
Relative enheter
Enheter
- em
- rem
- %
- vw
- vh
- vmin
- vmax
- ch
Egenskaper
I forhold til noe annet, som:
- (font-)størrelsen til et element
- størrelsen til viewportet
em & rem
em
Baserer seg på fontstørrelsen til samme element (direkte eller arvet)
rem
Baserer seg på fontstørrelsen til root-elementet
em & rem
%
vw & vh
vw
Baserer seg på bredden til viewportet
- 1vw = 1 % av bredden til viewportet
vh
Baserer seg på høyden til viewportet
- 1vh = 1 % av høyden til viewportet
vw & vh
Når skal jeg bruke hva?
rem: typografi
Når skal jeg bruke hva?
Når skal jeg bruke hva?
rem: typografi
px, rem: padding, border, margin (boksmodellen), media queries
Når skal jeg bruke hva?
rem: typografi
px, rem: padding, border, margin (boksmodellen), media queries
px, %, vw, vh: størrelsesegenskaper som width og height
rem: typografi
px, rem: padding, border, margin (boksmodellen), media queries
px, %, vw, vh: størrelsesegenskaper som width og height
em: dersom noe skal skalere i forhold til fontstørrelsen til et annet element enn root
Når skal jeg bruke hva?
Size Does Matter
By Markus Rauhut
