Μονάδες μεγέθους CSS (px rem em vh)
Προτιμήστε το rem για τις κλίμακες γραμματοσειράς διεπαφών· χρησιμοποιήστε px μόνο για λεπτές γραμμές και ακριβή στοιχεία.
| Μονάδα | Σχετικά με | Τυπική χρήση |
|---|---|---|
| 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 |
Σημειώσεις
- Σε κινητά, το 100vh μπορεί να συμπεριλαμβάνει κρυφά στοιχεία του browser — προτιμήστε dvh/svh όταν υποστηρίζονται.
- Οι ρυθμίσεις μεγέθους γραμματοσειράς του χρήστη επηρεάζουν το rem — αυτό είναι συνήθως επιθυμητό για την προσβασιμότητα.
Συχνές ερωτήσεις
- Πόσο είναι το 1rem σε px;
- Το 1rem ισούται με το μέγεθος γραμματοσειράς της ρίζας, οπότε με την προεπιλογή των 16 px, είναι 16 px.
- Ποια είναι η διαφορά μεταξύ em και rem;
- Το rem είναι πάντα σχετικό με το μέγεθος γραμματοσειράς του ριζικού στοιχείου, ενώ το em με το κληρονομημένο μέγεθος του τρέχοντος στοιχείου.
- Γιατί το 100vh δεν λειτουργεί σωστά σε κινητά;
- Οι mobile browsers μπορεί να δείχνουν ή να κρύβουν γραμμές UI, οπότε το 100vh μπορεί να υπερβαίνει την ορατή περιοχή· χρησιμοποιήστε dvh ή svh όταν υποστηρίζεται.