L

Egyperces: CSS mértékegységek

Már írtam hosszabban néhány relatív mértékegységről, mint például a vh és vw használatáról vagy a rem-ről.

Sokan bele sem gondolunk szerintem, hogy hány különböző méretezési lehetőség van a CSS-ben. Én is a napokban futottam bele egy érdekes oldalba, ahol összeszedték és vizuálisan ábrázolták is mindegyiket.

A CSS Ruler névre keresztelt oldalon megtaláljuk ábrázolva az összes relatív, abszolút és látótérhez százalékos mértékben számolt értékeket és akár játszhatunk is vele:

Relatív egységek:

  • em - A kiszámolt betűméretet alkalmazza. Ha a betűméretként használjuk, a szülő elemből átvett méretet alkalmazza.
  • ex - Az x karakter magasságához számolt méret, általában 1ex=0.5em, tehát a fele a betűméretnek.
  • ch - A 0, azaz nulla karakter (U+0030) szélsességéből számolt relatív egység.
  • rem - A html elem betűméretéből számolt relatív egység. Ha a html font-size: 16px, akkor 1rem=16px.

Abszolút egységek:

  • px - monitoroknál általában 1 képpontot jelent. Nyomtatásban vagy nagyon nagy felbontású monitoroknál egy pixel fizikailag több képpontot is elfoglalhat.
  • mm - miliméter
  • cm - centiméter
  • in - inch (hüvelyk) 1 inch=2,54 cm
  • pt - pont, a hüvelyk 72-ed része (1/72)
  • pc - pica (ciceró) = 12 pont (nagyjából 1/6 hüvelyk vagy 4.2 mm)
  • mozmm - kísérleti mértékegység, jelenleg csak Firefox alatt érhető el, a felbontás függvényében próbálja meg ábrázolni az 1mm-nyi egységet

Viewport egységek:

  • vw - a viewport szélességének 1%-a
  • vh - a viewport magasságának 1%-a
  • vmax - a viewport hosszabb oldalának 1%-a
  • vmin - a viewport rövidebb oldalának 1%-a

Összes Egyperces bejegyzés

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök