יחידות גודל ב-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 במכשירים ניידים יכול לכלול ממשק דפדפן מוסתר — העדיפו dvh/svh כשהן נתמכות.
- הגדרות גודל הפונט של המשתמש משפיעות על rem — בדרך כלל זה רצוי לנגישות.
שאלות נפוצות
- כמה זה 1rem ב-px?
- 1rem שווה לגודל הפונט של אלמנט השורש, כך שעם ברירת המחדל של 16px בדפדפן הוא 16px.
- מה ההבדל בין em ל-rem?
- rem תמיד יחסית לגודל הפונט של אלמנט השורש, בעוד em יחסית לגודל הפונט שעובר בירושה לאלמנט הנוכחי.
- למה 100vh לא עובד בנייד?
- דפדפנים ניידים עלולים להציג או להסתיר פסי ממשק, כך ש-100vh יכול להיות גבוה מהאזור הנראה; השתמשו ב-dvh או ב-svh כשהן נתמכות.