Enheter

CSS

Börja tänka responsivt med enheter i CSS

- %

- em

- rem

- vh

- vw

m fl.

- px

- pt

- cm

- in

- mm

PX - pixlar

den mest använda absoluta enheten

Dock! 1 px motsvarar inte alltid bredden av exakt 1 pixel (pixeltäthet o.s.v)

Ingen relativ enhet som generellt rekommenderas för RWD. Möjligtvis för mindre delar som box-shadow, border-radius, os.v

% - Procent

Relativt till värdet på föräldraelementet (parent) som har 100%. Använd på endast width så att proportioner bibehålls.

100%

30%

em

En relativ enhet som oftast används till fontstorlek, men kan även användas till margin och padding.

30%

Relativt till förälderns fontstorlek

Om fontstorleken är satt till 1em blir den beräknade fontstorleken samma som i föräldraelementet. Om fontstorleken är satt till 2em är fontstorleken dubbelt så stor som i föräldraelementet. Om ingen fontstorlek är satt är 1em per deault 16px.

Andra css-egenskaper som margin och padding

1 em är lika stort som den beräknade fontstorleken av själva elementet.

rem

30%

• Om dokumentets fontsize är 20px är 1rem 20px.
• Om 2rem är den 40px, etc.
• Om fontsize ej är angivet i rooten är det per default 16px.

En relativ enhet som oftast används till fontstorlek, men kan även användas till margin och padding. Till skillnad från em är rem relativt html-rotens fontsize.

vh & vw

viewport height & viewport width

30%

1vh är 1% av "viewport" i höjd

1vw är 1% av "viewport" i bredd

Exempelvis, 100vh blir "fullscreen".

Så, vilken enhet ska man använda? 🤔

Inga fasta regler, bara tips...

• Font-size = rem, em i vissa fall
• Padding och margin = em
• Bredd = %
• När man vill ha hela bredden/höjden = vw/vh