2021. január 24.

Viewport alapú egységek használata: VW, VH, VMIN, VMAX

A reszponzív weboldalak fejlesztése során az egyik legkényelmesebb eszköz a CSS viewport-alapú egységeinek használata.
A vw, vh, vmin és vmax segítségével olyan elemeket is könnyedén méretezhetünk – akár tipográfiát, akár blokkokat vagy konténereket –, amelyek automatikusan igazodnak a felhasználó képernyőméretéhez.

Arányos szövegméretezés

Ha azt szeretnénk, hogy egy <h1> cím mindig arányosan skálázódjon a viewport szélességével, elég egyetlen sor CSS:

h1 {
  font-size: 6vw;
}

Ennek hatására a betűméret folyamatosan nő vagy csökken a böngésző szélességének változásával, így nincs szükség media query-kre.

Mit jelentenek ezek az egységek?

A viewport egységek lényege, hogy mindig a böngészőablak aktuális méretéből számolódnak, így:

  • 1vw = a viewport szélességének 1%-a
  • 1vh = a viewport magasságának 1%-a
  • 1vmin = a [vw és vh közül] a kisebb
  • 1vmax = [vw és vh közül] a nagyobb

Ez rendkívül hasznos olyan esetekben, amikor:

  • négyzetes elemeket szeretnénk (vmin),
  • teljes magasságú blokkokat készítünk (vh),
  • nagy kijelzőkön is egységes tipográfiát akarunk tartani (vmax),
  • vagy minden méretváltozásnál pontosan arányos skálázást szeretnénk.

Egyszerű szemléltető példa

Tegyük fel, hogy a viewport szélessége 1200px.

Ebben az esetben:

  • 1vw = 12px
  • a font-size: 6vw így 72px lesz

Ha a felhasználó 800px szélességű ablakban nézi az oldalt:

  • 1vw = 8px
  • a 6vw → 48px

A tipográfia tehát folyamatosan igazodik a rendelkezésre álló helyhez.

Mikor érdemes viewport egységeket használni?

A viewport egységek legnagyobb előnye, hogy valódi, képernyőhöz igazodó, automatikusan skálázódó megoldást kínálnak — anélkül, hogy külön media query-ket kellene írni.
Bizonyos esetekben ezek a legjobb választások, mert rugalmasabbak és kiszámíthatóbbak, mint a hagyományos px, em vagy rem mértékegységek.

Az alábbiakban részletesen bemutatom, mikor érdemes őket használni.

Fluid tipográfia (H1–H6, bekezdések, hero szöveg)

A fluid tipográfia lényege, hogy a betűméret a böngésző méretéhez igazodik — nagy képernyőn nagyobb, mobilon kisebb.

A viewport-egységek erre kiválóak, mert:

  • nincs szükség külön töréspontokra (breakpoints),
  • a szöveg folyamatosan arányosan skálázódik,
  • hero szekciók, nagy címek esetén látványos és modern hatást kelt.

Például egy hero H1 esetében:

h1 {
  font-size: 8vw;
}

Ez önmagában fluid viselkedést biztosít, de később kombinálható clamp()-pel is, ha szélsőséges kijelzőméreteket is kezelni szeretnénk.

Teljes képernyős szekciók (hero, intro, slider, fullscreen blokkok)

Ha szeretnél egy olyan szekciót, amely mindig pontosan a képernyő teljes magasságát tölti ki, akkor a vh egység ideális választás:

section.hero {
  height: 100vh;
}

Ez többek között:

  • hero részeknél,
  • kezdő képernyőknél,
  • fullscreen popupoknál,
  • mobilbarát landing oldalaknál

szinte alapkövetelmény.

A vh egységnél érdemes tudni, hogy iOS-en létezik pár sajátosság, de már vannak rá megoldások (100dvh, 100lvh, 100svh).

Reszponzív kártyák, gombok, konténerek

A viewport egységekkel megoldható, hogy bizonyos elemek mérete a képernyőhöz igazodva változzon, például:

  • kártyák szélessége,
  • gombok mérete,
  • belső margók (padding),
  • banner elemek,
  • reszponzív rácsok.

Például egy banner szélességére:

.card {
  padding: 3vmin;
}

Ez azt eredményezi, hogy a kártya margói mindig arányosan változnak a képernyőhöz képest, így sok esetben nincs szükség egyedi media query-kre.

Négyzetes vagy kör alakú elemek egyszerű definiálása

Ha szeretnél olyan elemeket, amelyek:

  • mindig négyzetesek maradnak, vagy
  • mindig tökéletes körök,

akkor a vmin a legkényelmesebb egység.

Példa egy négyzetre:

.box {
  width: 20vmin;
  height: 20vmin;
}

Miért jó?

  • Ha a képernyő széles, a magasság határozza meg a méretet (hogy ne nyúljon túl szélesre).
  • Ha a képernyő magas, akkor a szélesség lesz a limit.
  • Minden képernyőn arányos, szép formát kapunk.

Kör esetén csak annyi a dolgunk, hogy border-radius-t adunk:

.circle {
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
}

Figyelmeztetés: túl kicsi mobilon, túl nagy desktopon

A sima vw alapú betűméretezés néha szélsőséges:

  • mobilon túl kicsi lehet,
  • óriási monitoron túl nagy.

Ezért ma már combóban használjuk a clamp() függvénnyel, például:

h1 {
  font-size: clamp(28px, 6vw, 60px);
}

Ez azt jelenti:

  • minimum 28px
  • ideális arány 6vw
  • maximum 60px

Ez a modern, ajánlott megoldás fluid typográfiára.