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.