5.04 Mértékegységek

A CSS mértékegységek egyrészt a grafikából jöttek, másrészt a képernyők világából.

Abszolút mértékegységek

px - pixel - a képernyők felbontásának alapja. A képernyőkön való használatnál rendben van, de a mobil eszközökön kérdéses a használhatósága. A mai okostelefonok már megoldják.
pt - point - a nyomtatóknál érdemes használni

Előre definiált kulcsszavak a CSS-ben: xx-small, x-small, small, medium, large, x-large, xx-large

Mindegyikhez egy méret tartozik, amely a böngészőben van definiálva. Az értékek körülbelül ilyenek:

rem - 1rem - a HTML TAG beállításához képest relatív méret (HTML tag értéke alapértelmezetten 16px). Ha ezt használjuk, és módosítani akarjuk egy weboldal összes betűméretét, akkor elég csak a HTML tag betűméretét átírni!
em - a szülő TAG betűméretéhez viszonyított méret. az 1em megegyezik a szülőben beállított mérettel. A 2em kétszeres a szülőnél beállított méretnek. A nagy M betű szélességéből számolták ki. Ha a body méreteét 62.5%-ban állapítjuk meg, akkor az 1em = 10px lesz. Probléma vele az öröklődés. Ha egy <div>-re a betűméret 1.2em és a beágyazott <div>-re 2em-et állítunk be, akkor a belső <div>-ben az eredeti érték 1.2*2 = 2.4 lesz! Erre figyelni kell!
százalék (%) - Ebben az esetben a szülő méretéhez képest kell a %-ot érteni. Ha egy <div> szélessége mondjuk 768px és egy beágyazott div szélességére 50%-ot állítunk be, akkor a beágyazott értéke: 768/2 = 384px lesz. Olyankor érdemes használni, hogyha az arányokat meg akarjuk tartani különböző képernyőméretek és felbontások esetén is. Az öröklődésre, csakúgy mint az em-nél itt is figyelni kell!

larger, smaller: Ezek 1.2x szorzóval értendők.

A viewport alapján számolt mértékegységek: VW, VH, VMAX, VMIN

1vw - A viewport 1%
1vh - A viewport magasságának 1%-a.
1vmin - A viewport rövidebbik oldalának 1%-a (fekvő monitor esetén ez a magasság szokott lenni)
1vmax - A viewport hosszabbik oldalának 1% (Fekvő monitor esetén általában a szélesség)

Használatuk ritka, de a mobil eszközök világában valószínűleg terjedni fog.

Reszponzív oldalak esetén a px nem túl nyerő, mert kis képernyőn másként látszik, mint nagyon. A böngészők zoom funkciója azonban segíthet. Ha egy oldalon sok helyen állítunk px-szel méretet és át akarjuk az oldalt méretezni, akkor sok helyen kell átírni az abszolút értékeket. Ilyenkor jobb a rem és az em.
Az em és rem fluid oldalak készítésekor hasznos. Figyelni kell az em-nél a relatív betűméret kérdésére, amit korábban már kifejtettem.
A kulcsszavak használata bonyolult esetben egyszerűbb, mert nem kell pixelekkel és százalékokkal bajlódni.
A viewport használata főleg a különböző méretű mobil megjelenítők számának és fajtáinak növekedésétől egyre fontosabb lehet. Ma már a web-et többen nézik mobiltelefonon, mint asztali számítógépen.