Mått och värden

Pixlar

Måttenheten px i CSS anger måttet i pixlar. Måttenheten är statisk och exakt.

CSS

img {
    width: 32px;
    height: 32px;
}

html {
    font-size: 16px;
}

h1 {
    border-bottom: 1px solid gray;
}

Procent

I många fall så används procent som måttenhet i CSS, det kan till exempel vara för att ange att ett element ska vara 100% brett eller 60% av ett fönsters bredd.

Kom ihåg att elementets % beräknas utifrån dess förälder(engelska parent). Ett element med w-100 blir 100% av sin förälder, så om föräldern har w-50 så blir barn-elementet 100% av 50%.

CSS

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

main {
    width: 80%;
    margin: 0 auto;
}

HTML

<main>
    <h1>80% av webbläsarfönstret</h1>
    <div class="w-100">
        <h2>100% bred, men bara 80% av fönstret</h2>
        <p>Eftersom den ligger i main elementet.</p>
    </div>
</main>

Undvik procent när du skalar text till exempel, då det ger dig väldigt lite kontroll över hur faktiskt stor texten blir.

Root EM

REM är ett måttvärde i CSS. Det utgår från root elementets font-storlek för att sätta storleken på element.

Värdet skrivs som nedan för att till exempel sätta storleken på texten och det kommer utgå från HTML-elementets textstorlek, vilket som oftast är 16px.

CSS

p {
    font-size: 1rem;
}

Om du anger detta på en sida så kan du sedan inspektera uträknade värden i webbläsarens utvecklingsverktyg. Se Fig 1.

Fig 1, Computer font-size of 4 rem.

Försök i största möjliga mån använda REM som måttenhet då det tillåter användaren att ändra fontstorlek, till skillnad från pixlar.

För att räkna ut storleken i pixlar från rem så kan du använda pixlar * rem = faktisk storlek i pixlar, så om du använder 0.5rem så blir storleken 8px. Om du vet pixelstorleken och vill räkna ut storleken i rem använder du storlek i pixlar / 16 = rem.