📏 7) Measurement Units (סוגי יחידות מידה)
למה יחידות מידה?
ב־CSS קיימות יחידות יחסיות (Relative) שמתאימות את עצמן לקונטקסט / למסך, ויחידות מוחלטות (Absolute) שקבועות פיזית או לוגית. ברוב אתרי ה־Web מומלץ להעדיף יחידות יחסיות עבור טקסט ועימוד.
| Relative — יחידות שמתאימות למסכים שונים | Absolute — יחידות מידה מוחלטות |
|---|---|
em | px (1px ≈ 1/96 של אינץ׳) |
rem | cm (ס״מ), mm (מ״מ) |
vw רוחב חלון, vh גובה חלון | in (1in = 2.54cm), pt, pc |
% — אחוזי המימד ההורי | — |
html ל־font-size: 16px או השתמשו ב־clamp() כדי לשלב נגישות עם רספונסיביות.יחידות יחסיות: em, rem, %
rem נסמך על גודל הגופן של html (שורש). em נסמך על גודל הגופן של האלמנט הנוכחי — לכן הוא מצטבר בהיררכיה. % תלוי במימד ההורה (לרוב width/height).
כרטיס (הורה) – 20px
בגלל שהכרטיס 20px, 1em = 20px.
כרטיס (הורה) – 20px
1rem תמיד ביחס ל־html (ברירת מחדל 16px).
html { font-size: 16px; }
.card-em { font-size: 20px; } /* הורה גדול יותר */
.card-rem { font-size: 20px; }
.btn-em { padding: 1em 1.25em; } /* 1em = 20px */
.btn-rem { padding: 1rem 1.25rem; } /* 1rem = 16px (שורש) */יחידות חלון (Viewport): vw, vh, vmin, vmax
יחידות אלו נמדדות לפי גודל חלון הדפדפן. לדוגמה, 10vw הוא 10% מרוחב החלון. שימושי ל־hero, טיפוגרפיה רספונסיבית וכד׳.
Responsive title
.hero-demo { height: 40vh; background: #ffedd5; border: 1px dashed #fb923c;
display: grid; place-items: center; }
.hero-title { font-size: clamp(1.25rem, 6vw, 3rem); } /* מינ' 1.25rem, מקס' 3rem */
יחידות מוחלטות (Absolute)
px (פיקסל לוגי) הוא הנפוץ בדפדפן. יחידות פיזיות (cm, mm, in, pt, pc) פחות שכיחות במסכים עקב DPI/Zoom והבדלים בין מכשירים.
/* דוגמה חינוכית בלבד — לא מומלץ ל־UI רספונסיבי */
.box-abs { width: 3cm; height: 20mm; border: 1pt solid #000; }טיפ: טקסט רספונסיבי עם clamp()
clamp(min, preferred, max) מאפשר לקבוע גודל דינמי עם גבולות — לדוגמה טיפוגרפיה שמבוססת על רוחב מסך אך לא קטנה/גדולה מדי.
טקסט זה גדל עם המסך: font-size: clamp(1rem, 2.5vw, 1.5rem)
.title { font-size: clamp(1.125rem, 4vw, 2rem); }
body { line-height: 1.6; }