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.

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.