Egyperces: CSS mértékegységek

• 2015.04.15.
• egypercessitebuild
• cssfontcss trükkök
• Leoamros

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