L

Font méretezés "rem"-mel

Elég heves viták folynak napjainkban is a megfelelő fontméret egységek kiválasztásában. Sajnos rengeteg előnye és hátránya is van a különböző technikáknak és nem ez az egyetlen felmerülő kérdés velük kapcsolatban.

Két fő technikát használunk/használtunk a CSS3 megjelenéséig.

  • Font méretezés pixelben
  • Font méretezés em-mel

Mielőtt bármibe belekezdenénk vegyük sorra, mik a rég bevált módszerek.

Font méretezés pixelben (px)

A web kialakulásakor mindent pixelben mértünk, a betűk méretét is pixelben határoztuk meg. Ez a méretezési forma mára már elavult technikának számít. Főleg, hogy minden oldalt reszponzívra kell terveznünk a különböző eszközök és képernyőméretek/felbontások miatt.

Személy szerint én még mindig használok pixel méretezést. Főleg azok állnak át nehezen, akik a régóta beégett technikákat alkalmazzák.

Font méretezés em-mel (em)

Az em eredetileg a tipográfiában használt mértékegység, mely megegyezik a nagy "M" karakter szélességével. Ezt a mértékegységet a CSS-ben egyszerűen egy relatív értékként határozták meg. 1em a CSS-ben az elem fontméretével egyezik meg.

Erre egy példa és természetesen a végeredmény:

See the Pen Em teszt by Smajda László (@leoamros) on CodePen.

Tehát az em méretezés mindig az aktuális elemre alkalmazott font méretből számolódik. Mi ezzel a baj?

Számoljunk:

Vegyünk egy 10px alap betűméretet, hogy könnyebb legyen számolgatni.

CSS

html {
    font-size: 10px;
}

li {
    font-size: 1.4em;
} /* font-size = 14px */

De mi van akkor, ha egy lista elemünk egy másik lista elemet tartalmaz?

10×1.4×1.4 = 19,6px ~ 20px

Tehát a második lista elemünk már 20px méretű lesz.

Minta:

See the Pen Em teszt by Smajda László (@leoamros) on CodePen.

Ugye-hogy-ugye... Frusztráló... Mit tehetünk?

Font méretezés rem-mel

A CSS3-ban bevezettek néhány új mértékegységet, ezek egyike a rem. A rem a "root em" rövid alakja. Míg az em az elemhez képest számított relatív mértékegység, addig a rem a root (gyökér) elemhez, azaz a html tag-hez képest számolt relatív méret.

Ez annyit jelent számunkra, hogy meghatározhatunk egy alap fontméretet a html elemünknek, majd ebből kiindulva méretezhetjük az összes többi elemet.

Kicsit módosítsuk az előző példát, így könnyebb lesz megérteni:

CSS

html {
    font-size: 10px;
}

li {
    font-size: 1.4rem;
} /* font-size: 14px */

És a végeredmény:

See the Pen rem teszt by Smajda László (@leoamros) on CodePen.

Tehát a rem-mel a formázásunk minden esetben a html-ből kiindulva számolódik, így a lista elemek mindig ugyanúgy 14px méretben fognak megjelenni.

Mára ez a CSS property minden böngészőben elérhető. Persze, mint mindennel, ezzel is vannak gondjai az Internet Explorernek.

IE9 és IE10 alatt nem használható a font rövidített alakban:

font: italic bold 1.2rem/3rem Georgia, serif;

És nem használható IE9, IE10 és IE11 alatt, a :before vagy :after pszeudó-elemen sormagasság állítására:

div.xy:before{
    line-height: 2rem;
}
div.xy:after{
    line-height: 3rem;
}

A hibajegy szerint ilyenkor automatikusan 1px sormagasságot kap a pszeudó-elemünk .

És mit tehetünk, ha mégis olyan esetbe futunk, ahol a böngésző nem támogatja a rem-et?

A legegyszerűbb a dupla méretezés:

font-size: 14px; font-size: 1.4rem;

Így automatikusan a modern böngészőkben a rem érték lesz érvényes, a nem támogatott böngészőkben pedig a pixel érték. Persze ez a CSS kód növekedését és dupla gépelést igényel a betűméret beállításakor. Tehát, use rem :)

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