Ha CSS -sel foglalkozol, fontos, hogy lásd a mértékegységek közötti különbséget. Sok van belőlük és nagyon könnyen összekeverhetőek. Nézzük a három CSS mértékegység típust amit érdemes lesz megtanulnod. Abszolút, Relatív és Viewport. Ha látod a különbséget akkor könnyebben el tudod dönteni, hogy mikor melyiket használd
Abszolút
Amint a neve is mutatja, ezek a mértékegységek fix méretűek. Ezek nem változnak a képernyő méretének vagy bármi másnak a függvényében. Egy centiméter mindig egy centiméter. 🙂
- cm — centiméter
- mm — milliméter
- in — inches
- pt — points
- px — pixel
- pc — pica
1 in = 2,54 cm = 254 mm = 72 pt = 96 px = 6 pc
Relatív
Itt egy kicsit bonyolultabbá válik a helyzet. A legtöbb böngészőben az alapértelmezett betűméret 16 pixel. Azt javaslom, hogy ezt az érték legyen minden relatív számítás alapja. A relatív egységek a következőkből állnak:
- % — percentage
- em — az elem betűmérete a szülőhöz képest (3em azt jelenti, hogy a normál betűméret háromszorosa)
- rem — az elem betűmérete a html gyökér elemhez viszonyítva
- ch — a „0” karakter szélessége (monospace betűtípusokban az összes karakter azonos szélességű)
- ex —a használt betűtípus magassága (az „x” karakter magassága)
A ch és az ex az aktuálisan használt betűkészlettel együtt változik.
Viewport
A Viewport mértékegységei viselkedésükben relatívnak mondhatók. Ahogy a neve is mutatja, ezek a böngésző nézetablakának (viewport) méretéhez vannak viszonyítva.
- vw — a nézetablak szélességének % -a
- vh — a nézetablak magasságának % -a
- vmin — a kisebb méret % -a (szélesség vagy magasság)
- xmax — a nagyobb méret % -a (szélesség vagy magasság)
