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.

Made with Slides.com