Mérei Tamás webdesigner

Helló!Mérei Tamás vagyok, webdesigner

20 éve foglalkozom weboldalak, felhasználói felületek tervezésével, kódolásával és WordPress sablonok készítésével. Dolgozom magánszemélyeknek, fejlesztő cégeknek, multiknak, állami szervezeteknek és reklámügynökségeknek is.

CSS mértékegységek

A CSS mértékegységek a betű- és egyéb méretek megadására szolgálnak. 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.

A téma W3C szabvány szerinti leírása itt olvasható.

CSS mértékegységek: 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>

CSS mértékegységek: 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.

CSS mértékegységek

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>

CSS mértékegységek: 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>

CSS mértékegységek: 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.