CSS méretmértékegységek (px rem em vh)
Az UI betűméreteknél a rem-et részesítsd előnyben; px-et csak hajszálvékony vonalakhoz és pixelpontos részletekhez használj.
| Mértékegység | Viszonyítva | Tipikus használat |
|---|---|---|
| px | Device pixel (CSS pixel) | Borders, precise icons |
| rem | Root element font-size | Type scale, spacing |
| em | Parent font-size | Component-local sizing |
| % | Parent property | Widths, flexible layouts |
| vw | 1% viewport width | Full-bleed sections |
| vh | 1% viewport height | Hero height (mind mobile UI) |
| vmin / vmax | Smaller/larger viewport side | Square-ish responsive sizing |
| ch | Width of “0” glyph | Code blocks, monospace fields |
| ex | x-height of font | Rare fine typography |
| svh / lvh / dvh | Small/large/dynamic viewport | Mobile browser chrome-safe height |
Megjegyzések
- Mobilon a 100vh tartalmazhat rejtett böngésző-felületi elemeket — ha támogatott, részesítsd előnyben a dvh/svh-t.
- A felhasználó betűméret-beállítása hatással van a rem-re — ez az akadálymentesség szempontjából általában kívánatos.
Gyakori kérdések
- Mennyi az 1rem px-ben?
- Az 1rem a gyökérelem betűméretével egyenlő, így a böngésző alapértelmezett 16 px-énél az 1rem = 16 px.
- Mi a különbség az em és a rem között?
- A rem mindig a gyökérelem betűméretéhez viszonyít, míg az em az aktuális elem által örökölt betűmérethez.
- Miért nem működik a 100vh mobilon?
- A mobil böngészők megjelenítik és elrejtik a felületi sávokat, ezért a 100vh magasabb lehet a látható területnél; ha támogatott, használj dvh-t vagy svh-t.