CSS mértékegységek

Közzétéve: 2017-11-09. Kategória: HTML, CSS

Rengeteg mértékegység létezik a betű- és egyéb méretek megadására. Az abszolút egységek mérete nem függ a szülő elemtől, míg relatív megadás esetén a betű mérete valamelyik felette található elem betűméretétől függ.

Relatív mértékegységek

EM

Az egyik legősibb mértékegység a weben. Neve onnan ered, hogy méretét a nagy M betű szélességéből számolták.

1em az aktuális betűméretnek felel meg. Ha az aktuális betű mérete 12px, akkor 1em = 12px, 2em = 24px.

Népszerű megoldás a body méretét 62.5%-ra állítani, ami 10px értéknek felel meg. Innentől 1em = 10px lesz ami jelentősen leegyszerűsíti a számolgatást. Ezt a módszert követve: 1.1em = 11px, 1.2em = 12px…

Egyetlen problémája az öröklődés miatt kialakuló érték duplázódás. Ha például a div elemre ráteszünk egy 20px-es betűméretet és a div-en belül, szerepel egy újabb div, akkor annak a betűmérete már 40px lesz.


<style type="text/css">
    body { font-size: 62.5% } /* = 10px */
    div { font-size: 2em } /* = 20px */
    p { font-size: 1.2em } /* = 12px */
</style>

<p>bekezdés - 12px</p>
<div>
    DIV-en belüli szöveg - 20px
    <div>
        Második szint - 40px
        <div>Harmadik szint - 80px</div>
    </div>
</div>

REM

Root EM, azaz a HTML elemet veszi alapul. 1rem = a HTML elemre beállított betűméret.

A betűméret nem öröklődik, hanem mindig a HTML elem méretéhez képest lesz kiszámolva, ami alapértelmezetten 16px.

Ha rem mértékegységet használunk és később meg akarjuk növelni a betűk méretét, elegendő a HTML elemen átírni és az egész oldal ezzel arányosan fog módosulni.

Nem csak betűk méretezéséhez használható, hanem szélességet, padding-et és margin-t is állíthatunk vele.


<style type="text/css">
    html { font-size: 16px }
    div { font-size: 1rem } /* = 16px */
    h1 { font-size: 2rem } /* = 32px */
    p { font-size: .75rem } /* = 12px */
</style>

<div>
    DIV-en belüli szöveg - 16px
    <h1>első címsor - 32px</h1>
    <p>bekezdés - 12px</p>
</div>

Százalékos megadás

Az aktuális betűméret értéke mindig 100%. Ha egy div betűmérete mondjuk 20px, és a benne lévő bekezdésre 50%-os betűméretet állítunk be, akkor az 10px-nek felel meg. Az em mértékegységnél tapasztalt öröklődési probléma itt is fennáll. Ezt leszámítva kiválóan használható betűméret és szélesség megadására is.


<style type="text/css">
    body { font-size: 62.5% } /* = 10px */
    div { font-size: 200% } /* = 20px */
    p { font-size: 120% } /* = 12px */
</style>

<p>bekezdés - 12px</p>
<div>
    DIV-en belüli szöveg - 20px
    <div>
        Második szint - 40px
        <div>Harmadik szint - 80px</div>
    </div>
</div>

Relatív kulcsszavak

A smaller és larger kulcsszavakkal a szülő elemhez képest tudjuk csökkenteni / növelni a betűk méretét. 1.2x szorzót használ, tehát, ha 16px a szülő elem mérete, akkor a larger kulcsszóval 19.2px méretet fogunk kapni.


<style type="text/css">
    div { font-size: 16px }
    div p { font-size: larger } /* = 19.2px */
</style>
<div>
    Ez a szöveg 16px méretű.
    <p>Ez pedig már 19.2px méretű lesz.</p>
</div>

VW, VH, VMAX, VMIN

Viewport-hoz igazított mértékegységek. A vw a viewport szélességhez, a vh pedig a magasságához igazodik.

1vw = 1%-a a viewport szélességének
1vh = 1%-a a viewport magasságának
1vmin = 1%-a a viewport rövidebbik oldalának
1vmax = 1%-a a viewport hosszabbik oldalának

Fekvő képarány esetén 1vmax = 1vw, álló képarány esetén 1vmax = 1vh.

EX, CH

Az ex mértékegység a szöveg x-magasságához igazítja a betűméretet. Az x-magasság a középvonal és az alapvonal közti távolság, ami tipikusan az „x” betű magassága. A ch is hasonló, csak a nulla karakterhez igazítja a betűméretet.

Az egyik fórumon úgy definiálta valaki, hogy „ugyanaz mint az em csak magasság kiadásban”. A lényege az lenne, hogy a kisbetűs részhez tudjuk igazítani a szöveg magasságát. Embert még nem láttam aki használná, én is csak tájékoztató jelleggel írok róla. Egyetlen épkézláb példát találtam hozzá amivel a felső- és alsó index böngésző által renderelt pozícióját lehet megváltoztatni. Ha valakinek ez szempont, akkor íme a kód:


<style type="text/css">
    sup, sub { position:relative }
    sup { bottom: 1ex }
    sub { bottom: -1ex }
</style>

<p>Lorem ipsum <sup>Felső index</sup></p>
<p>Lorem ipsum <sub>Alsó index</sub></p>

Abszolút mértékegységek

PT (point), PC (pica), MM (millimeter), CM (centimeter), IN (inch)

Nyomtatásban használt mértékegységek. Nyomtatóra szánt CSS-nél érdemes használni.

1in = 2.54cm = 25.4mm = 72pt = 6pc


@page {
    size: A4;
    margin: 1cm
}
@media print {
    body { font-size: 12pt }
}

PX

Abszolút méret, de relatív a használt eszköz kijelzőjéhez képest ami abból adódik, hogy nagy felbontású kijelzőn 1px több képpontot is jelenthet.

Elég pontosan lehet vele dolgozni, mert biztosak lehetünk benne, hogy a 12px méretű betű az a monitoron pontosan 12px magas lesz. A mobileszközös használhatóságát szokták megkérdőjelezni, de szerencsére a mai telefonok már elég jól megoldják ezt a problémát.

Kulcsszavak

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

Mindegyikhez tartozik egy méret amit a böngésző határoz meg. Az értékek általában így néznek ki:

xx-small = 9px
x-small = 10px
small = 13px
medium = 16px
large = 18px
x-large = 24px
xx-large = 32px


<style type="text/css">
    h1 { font-size: xx-large } /* = 32px */
    h2 { font-size: x-large } /* = 24px */
    h3 { font-size: large } /* = 18px */
    p { font-size: medium } /* = 16px */
</style>

<h1>első címsor - 32px</h1>
<h2>második címsor - 24px</h2>
<h3>harmadik címsor - 18px</h3>
<p>Bekezdés - 16px</p>

Melyiket használjam?

Amelyik jólesik. Mindegyiknek van előnye és hátránya. Én mostanában rem-et és százalékos megadást használok.

A reszponzív weboldalak korában sokan fikázzák a px-et arra hivatkozva, hogy nem szabad lefixálni a betűk méretét. A mai böngészők közül mindegyik rendelkezik zoom funkcióval ami arányosan nagyítja fel az oldalakat a margin és padding értékekkel együtt. Inkább akkor körülményes a px használata amikor globálisan szeretnénk betűméretet növelni, mert ilyenkor egyesével kell átírni mindenhol az értékeket. Layout tervezésre és szélességek megadásához célszerűbb százalékos vagy em / rem értékeket használni.

Az em és a rem kiválóan használható fluid layout készítéséhez. Alapkoncepciója, hogy a HTML elemen beállított betűméret határozza meg az oldal összes többi méretét. Az em a parent elemtől örököl, ezért nagyobb odafigyelést igényel a használata. A rem mindig a HTML elemtől örököl, ezáltal könnyebb értékszámítást tesz lehetővé.

A kulcsszavas megadás sem ördögtől való. Nem olyan rossz, ha nem kell értékeket számolgatni, hanem csak simán beírjuk a címsorra, hogy xx-large. Habár abszolút értékekről van szó, ennek nincs túl sok jelentősége, mert a böngésző zoom funckiója ezeket is arányosan felnagyítja.

A viewport-hoz igazított mértékegység is jó választás lehet, mert nem függ a betűmérettől, parent elemtől, root elemtől, hanem ténylegesen a megtekintő eszközhoz méretezi a tartalmat.