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)

Humli Miklós

Szerző Humli Miklós

Régóta dolgozom együtt kis-, közép- és nagyvállalalatokkal az arculattól a nyomtatott anyagokon keresztül az online megjelenésig. Az elmúlt évtizedekben UI, UX designerként, webfejlesztőként és mobil fejlesztőként használt keretrendszerek, szoftverek és technológiák alkalmazása során értettem meg, hogy hatékonyan működni csakis úgy lehet, hogyha megtalájuk a feladathoz a legmegfelelőbb eszközt.

További bejegyzések: Humli Miklós