CSS egységek
A CSS egységek határozzák meg, hogyan adjuk meg a méreteket a weboldalakon, például a betűméretet, szélességet vagy magasságot. Két fő kategóriájuk van: abszolút és relatív egységek.
Abszolút és relatív egységek
Az abszolút egységek fix értékek, amelyek minden eszközön azonos méretet adnak (például px vagy cm). A relatív egységek ezzel szemben a környezethez igazodnak, például az aktuális betűmérethez vagy a böngésző ablak méretéhez.
| Egység | Típus | Leírás |
|---|---|---|
| px | Abszolút | Képpont (pixel), a leggyakrabban használt abszolút egység a webfejlesztésben. |
| cm | Abszolút | Centiméter, ritkán használt, főként nyomtatott megjelenítésnél. |
| mm | Abszolút | Milliméter, szintén nyomtatási célokra alkalmazott egység. |
| em | Relatív | Az aktuális elem betűméretéhez viszonyított egység. |
| rem | Relatív | A gyökér (root, <html>) elem betűméretéhez viszonyított egység. |
| % | Relatív | Százalék, a szülő elem méretéhez viszonyítva határozza meg az értéket. |
| vh | Relatív | A böngésző ablak magasságának 1%-át jelenti. |
| vw | Relatív | A böngésző ablak szélességének 1%-át jelenti. |
CSS egységek használata a gyakorlatban
Nézzünk meg néhány példát, hogyan működnek az abszolút és relatív egységek a gyakorlatban.
Ebben a példában az egyik bekezdés abszolút (px), a másik relatív (em) betűméretet kap.
Ebben a példában egy doboz szélessége a szülő elem 50%-a, a magassága pedig a viewport magasságának 50%-a.
Viewport alapú egységek
A viewport egységek a böngészőablak méretéhez igazodnak. A 100vw a teljes szélességet, a 100vh a teljes magasságot jelenti. Ez különösen hasznos teljes képernyős szekciók készítésénél.
em és rem összehasonlítása
Az em az aktuális szülő elem betűméretéhez viszonyul, míg a rem mindig a root (html) elemhez. Ezért ugyanaz a 2em és 2rem különböző méretet adhat.
Egységek kombinálása
A gyakorlatban gyakran keverjük a relatív egységeket: például egy doboz lehet 80% széles és 60vh magas, benne egy belső elem 50%-os szélességgel és magassággal.
Tippek a CSS egységek használatához
Az egységek helyes használata kulcsfontosságú a reszponzív és felhasználóbarát weboldalak készítésénél.
- Reszponzív designhoz előnyben részesítsd a relatív egységeket (em, rem, %, vh, vw).
- Kerüld a túl sok fix px használatát, mert kisebb képernyőkön nehezen olvasható lehet.
- Nyomtatáshoz használj inkább abszolút egységeket (cm, mm, in), mert pontosabbak.
Melyik egység relatív az alap betűmérethez?
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
