1. FEJEZET
Mihez viszonyít a méret?
A CSS-ben minden hosszúságot mértékegységgel adunk meg (kivétel a 0). A böngésző végül mindent CSS-pixelre számol át – a kérdés csak az, hogy miből:
| Egység | Mihez viszonyít? | Tipikus használat |
|---|---|---|
px | semmihez (rögzített CSS-pixel) | szegély, árnyék, apró részletek |
% | a szülő (pontosabban a tartalmazó blokk) méretéhez | rugalmas szélességek |
em | a betűmérethez: font-size-nál a szülőé, más tulajdonságnál az elem sajátjához | a szöveghez igazodó belső margó |
rem | a gyökérelem (html) betűméretéhez | betűméretek, egységes térközök |
vw, vh | a nézetablak (böngészőablak) szélességének / magasságának 1%-a | teljes képernyős szakaszok |
vmin, vmax | a nézetablak kisebbik / nagyobbik méretének 1%-a | álló és fekvő kijelzőn is arányos elemek |
A CSS-pixel nem a kijelző fizikai képpontja. Egy nagy felbontású telefonon 1 CSS-pixel 2–3 fizikai képpontból is állhat, és a böngésző nagyítása is megváltoztatja. A px ezért „rögzített”, de nem „valódi” méret.
2. FEJEZET
Százalék: a szülőhöz képest
A width: 50% a szülő tartalomszélességének a fele. Meglepő, de a padding és a margin százaléka minden oldalon a szélességből számolódik – a felső és az alsó is. A height százaléka csak akkor működik, ha a szülőnek megadott magassága van.
PRÓBÁLD KI
Szélesítsd a szülőt
3. FEJEZET
em és rem
Mindkettő betűméret-alapú, a különbség a viszonyítási pont: az em a szülő betűméretéhez (ezért öröklődés közben halmozódik), a rem mindig a gyökér (html) betűméretéhez. Az alábbi mini ablaknak saját html eleme van, így a gyökér betűmérete is állítható.
PRÓBÁLD KI
Háromszor egymásba ágyazva: 1.5em kontra 1.5rem
A beágyazott em betűméret halmozódik: 1.5em × 1.5em × 1.5em = 3,375-szörös. Ezért betűméretre többnyire rem-et használunk, az em-et pedig olyan helyen, ahol az elemnek a saját szövegéhez kell igazodnia – például egy gomb belső margójánál: padding: 0.5em 1em. Így a nagyobb betűs gomb arányosan nagyobb lesz.
4. FEJEZET
A nézetablak egységei: vw, vh, vmin, vmax
Ezek nem a szülőhöz, hanem a böngészőablak látható részéhez (a nézetablakhoz) viszonyítanak: 1vw a szélesség 1%-a, 1vh a magasság 1%-a. Ha egy 1200 × 800 px-es ablakban vagyunk: 1vw = 12 px, 1vh = 8 px, 1vmin = 8 px, 1vmax = 12 px.
A mini ablak a jobb alsó sarkánál fogva átméretezhető (vagy használd a gombokat) – mintha a böngészőablakot méreteznéd át. A belső elemek a mini ablak nézetablakához igazodnak, a kiírt pixelértékeket a böngésző számolta.
PRÓBÁLD KI
Méretezd át az ablakot
↘ a jobb alsó sarok húzásával átméretezhető
Mobilon a 100vh néha magasabb a látható résznél, mert a böngésző címsora görgetéskor eltűnik vagy megjelenik. Erre valók az újabb egységek: svh (a legkisebb látható magasság), lvh (a legnagyobb) és dvh (az éppen aktuális).
5. FEJEZET
Rugalmas, de korlátos: clamp()
A tisztán vw-ben megadott betűméret telefonon túl kicsi, nagy monitoron túl nagy lehet. A clamp(min, kívánt, max) a kívánt értéket használja, de soha nem megy a minimum alá és a maximum fölé. Ez a fenti mini ablak címsorán is látszik: font-size: clamp(1.25rem, 5vw, 2.5rem) – keskeny ablakban 20 px-nél, széles ablakban 40 px-nél megáll.
ÖSSZEFOGLALÁS
Amit érdemes megjegyezni
%: a szülőhöz; apadding/marginszázaléka mindig a szülő szélességéből.em:font-size-nál a szülő betűméretéből, máshol az elem saját betűméretéből; egymásba ágyazva halmozódik.rem: mindig ahtmlbetűméretéből – kiszámítható, ezért betűmérethez ez a szokásos.vw/vh: a nézetablakból, nem a szülőből.clamp(): rugalmas érték alsó és felső korláttal.