Mga yunit ng laki sa CSS (px rem em vh)
Mas gusto ang rem para sa UI type scale; gumamit lang ng px para sa manipis na border at pixel-exact na detalye.
| Yunit | Kaugnay sa | Karaniwang gamit |
|---|---|---|
| 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 |
Tala
- Ang 100vh sa mobile ay maaaring may kasamang nakatagong browser chrome — mas gusto ang dvh/svh kapag suportado.
- Naaapektuhan ng setting ng laki ng font ng user ang rem — karaniwang kanais-nais ito para sa accessibility.
Mga madalas itanong
- Magkano ang 1rem sa px?
- Ang 1rem ay katumbas ng laki ng font ng root element, kaya sa default na 16 px ng browser, ito ay 16 px.
- Ano ang pagkakaiba ng em at rem?
- Ang rem ay laging nauugnay sa laki ng font ng root element, habang ang em ay nauugnay sa namamanang laki ng font ng kasalukuyang element.
- Bakit hindi gumagana ang 100vh sa mobile?
- Maaaring ipakita o itago ng mga mobile browser ang UI bars, kaya ang 100vh ay maaaring mas mataas kaysa sa nakikitang lugar; gumamit ng dvh o svh kapag suportado.