Unit saiz CSS (px rem em vh)
Utamakan rem untuk skala jenis UI; guna px hanya untuk bingkai halus dan butiran tepat piksel.
| Unit | Relatif kepada | Kegunaan biasa |
|---|---|---|
| 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 |
Nota
- 100vh pada mudah alih boleh termasuk elemen penyemak imbas tersembunyi — utamakan dvh/svh jika disokong.
- Tetapan saiz fon pengguna mempengaruhi rem — itu biasanya diingini untuk aksesibiliti.
Soalan lazim
- Berapakah 1rem dalam px?
- 1rem bersamaan saiz fon elemen akar, jadi dengan lalai 16 px dalam pelayar ia ialah 16 px.
- Apakah perbezaan antara em dan rem?
- rem sentiasa relatif kepada saiz fon elemen akar, manakala em relatif kepada saiz fon yang diwarisi elemen semasa.
- Mengapa 100vh tidak berfungsi pada mudah alih?
- Pelayar mudah alih mungkin menunjukkan atau menyembunyikan bar UI, jadi 100vh boleh lebih tinggi daripada kawasan kelihatan; guna dvh atau svh jika disokong.