UX / UI Alacsony hatás Közepes 30–60 perc

Relatív betűegységek (rem/em vs px)

Részesítse előnyben a rem/em-et a fix px-szel szemben a betűméreteknél.

Mi ez

A betűméret megadható fixen px-ben, vagy relatívan rem/em-ben. A rem a dokumentum alapméretéből indul ki, így reagál a felhasználó böngészőbeli betűméret-beállítására.

Miért foglalkozzon vele

A fix px figyelmen kívül hagyja, amikor a felhasználó a böngészőben megnöveli az alapértelmezett betűt (gyakori a gyengénlátóknál). A rem/em tiszteletben tartja ezt a beállítást, akadálymentesebb és könnyebben skálázható konzisztensen.

Hogyan csinálja

1Állítsa be az alapméretet a <html>-en (jellemzően 100% = 16px).
2A betűméreteket remben adja meg (pl. 1rem, 1.25rem, 0.875rem).
3Az em-et ott használja, ahol a méretnek a szülőből kell kiindulnia.
4A fix px-et csak olyan részleteknél hagyja, ahol a skálázásnak nincs értelme (pl. 1px-es vonalak).

Példa

Rosszul

h1 { font-size: 32px; }
p  { font-size: 14px; }

Helyesen

html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Összegzés

A relatív egységek akadálymentesebbek és karbantarthatóbbak. Nem vészhelyzet, mint a letiltott zoom, de új weboldalnál érdemes rögtön jól csinálni remmel. Tiszteletben tartja azokat a felhasználókat, akik megnövelik a betűt.

Kapcsolódó témák