Mértékegységek

Százalék
A legtöbb értéket megadhatjuk százalékban, hosszmértékként értelmezve ezt általában a szülő konténer mérete alapján számolja a böngésző.
1
div {
2
    width: 60%;
3
    height: 60%;
4
    right: 20%;
5
    top: 20%;
6
}
Copied!
Képpont - pixel
Tekinthetjük alap mértékegységnek, egy képpontja a magjelenítő eszköznek. A böngészők minden egyéb hosszmértéket erre számítanak át. Ez eltérhet a nagyobb képpont sűrűségű eszközökön, például retina eszközön egy pixel egy 3*3 képpontos négyzet.
1
div {
2
    font-size: 18px;
3
    width: 350px;
4
    padding: 30px 25px;
5
}
Copied!
Tipográfiai mértékegységek
A tipográfiai mértékegységek jellemzően egy bizonyos betű magasságát veszik egy egységnek.
Em - M magasság
A nagy M betű magassága alapján számolja a távolságokat. Ez a legelterjedtebb tipográfiai mértékegység. A szülőhöz képest állítja be a fontméretet, ha a szülőnek 2em a font mérete, a gyermeknek pedig 1em, a szülő és a gyermek számított font mérete megegyező lesz.
1
p {
2
    font-size: 1em;
3
    line-height: 1.2em;
4
}
Copied!
Rem - Relatív M magasság
Az em párja, de ez nem öröklődik, a body fontmérete alapján számítja ki a böngésző.
1
p {
2
    font-size: 1rem;
3
    line-height: 1.2rem;
4
}
Copied!
Egyéb tipográfiai mértékegységek
Ex
Az ex a kis x magassága alapján számolt egység, az em érték fele pixelben
ch
A ch a 0 karakter szélessége alapján számolt egység.
Fizikai hosszmértékek
A méreteket megadhatjuk fizikai kiterjedés alapján, ez a HTML dokumentum nyomtatása estén használatos.
cm - centiméter
mm - miliméter
in - incs
pc - nyomdai pica
pt - nyomdai pont
Képernyőméret
Képernyőmező szélesség - viewport width
A vw egy egysége a képernyő szélességének századrésze. vagyis egy 100vw szélességű elem a képernyő teljes szélességét kitölti.
Képernyő magasság - viewport height
A vh egy egysége a képernyő magasságának századrésze. vagyis egy 100vh magasságú elem a képernyő teljes szélességét kitölti.
Kisebb képernyő dimenzió - viewport min
A vmin egy egysége a vh és a vw értéke közül a kisebbel lesz egyenlő.
Nagyobb képernyődimenzió - viewport max
A vmax egy egysége a vh és a vw értéke közül a nagyobbal lesz egyenlő.
1
.container1 {
2
    width: 55vw;
3
    height: 66vh;
4
}
5
​
6
.container2 {
7
    max-width: 99vmin;
8
    width: 20vmax;
9
}
Copied!
Idő
Animációk, átmenetek vagy hang időzítése esetén az időfaktor beállítására használhatjuk.
1
transition: all 0.3s ease 0.1s;
Copied!
Szögek
Elemek forgatása esetén használatos mértékegységek:
deg - fok
grad - újfok (derékszög század része)
rad - radiáns
turn - teljes fordulat (360°)