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

 

Absolutte enheter

Enheter

  • px (1px = 1/96in)
  • cm (1cm = 38px)
  • in (1in = 2.54cm = 96px)
  • ​mm​
  • pc
  • pt

 

Størrelsesenheter

  • Absolutte enheter / relative enheter

  • Pixel (px)

  • em / rem

  • percentage (%)

  • viewport (vh, vw)

  • calc

  • clamp

Absolutte enheter

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96 DPI and a distance from the reader of an arm’s length.

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

Relative enheter

Enheter

  • em
  • rem
  • %
  • vw
  • vh
  • vmin
  • vmax

 

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

em & rem 

Bruk em kun dersom noe skal skalere i forhold til fontstørrelsen til et annet element enn root.

 

Bruk rem ellers.

%

%

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? 

body {
  color: black;
}

.important {
  color: red;
}

span {
  color: blue;
}

span {
  color: blue;
}

Kaskade, Spesifisitet og Arv

margin

border

padding

content

Box-modellen

Flexbox

1

2

3

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? 

calc

calc

Kan brukes til ĂĄ konvertere og blande enheter

 Tilgjengelige operatorer:

  • + (addisjon)

  • – (subtraksjon)

  • * (multiplikasjon)

  • / (divisjon)

clamp

Klamrer en verdi mellom en øvre- og en nedre grense

clamp tar inn 3 verdier:

  1. Minimumsverdien

  2. Den foretrukne verdien

  3. Makimumsverdien

clamp

It's not the size of an element that matters, it's what unit you use that counts.

Size Does Matter

By Markus Rauhut

Made with Slides.com

Size Does Matter

  • 115

More from Markus Rauhut