שימוש ב- Ems לשינוי גודלי גופנים
כאשר אתה בונה דף אינטרנט, רוב אנשי מקצוע ממליצים לך גודל גופנים (ולמעשה, הכל) עם מידה יחסית כגון ems, exs, אחוזים, או פיקסלים. הסיבה לכך היא שאתה באמת לא יודע את כל הדרכים השונות שמישהו עשוי להציג את התוכן שלך. ואם אתה משתמש במדד מוחלט (אינצ'ים, סנטימטרים, מילימטרים, נקודות או פיקות) הוא עשוי להשפיע על התצוגה או הקריאות של הדף במכשירים שונים.
ו- W3C ממליץ להשתמש ב- ems בגדלים.
אבל כמה גדול הוא אם?
על פי ה- W3C:
"שווה לערך המחושב של המאפיין 'גודל גופן' של הרכיב שבו הוא נמצא.החריג הוא כאשר '' מתרחשת בערך של המאפיין 'font-size' עצמו, ובמקרה זה הוא מתייחס לגודל הגופן של האלמנט ההורה ".
במילים אחרות, לאם אין גודל מוחלט. הם לוקחים על הגודל שלהם ערכים המבוססים על המקום שבו הם נמצאים. עבור רוב מעצבי אתרים , זה אומר שהם בדפדפן אינטרנט, כך גופן הוא 1em הוא בדיוק באותו גודל כמו גודל הגופן של ברירת המחדל עבור דפדפן זה.
אבל כמה גבוה הוא גודל ברירת המחדל? אין שום דרך להיות 100% בטוח, כמו הלקוחות יכולים לשנות את גודל הגופן ברירת המחדל שלהם דפדפנים, אבל מאז רוב האנשים לא ניתן להניח כי רוב הדפדפנים יש גודל גופן ברירת המחדל של 16px. אז רוב הזמן 1em = 16px .
תחשוב על פיקסלים, השתמש Ems למדוד
לאחר שתדע שגודל ברירת המחדל של הגופן הוא 16px, תוכל להשתמש ב- ems כדי לאפשר ללקוחות שלך לשנות את גודל הדף בקלות, אך חשוב בפיקסלים לגדלי הגופן.
תגיד שיש לך מבנה שינוי גודל משהו כזה:
- כותרת 1 - 20px
- כותרת 2 - 18px
- כותרת 3 - 16px
- טקסט ראשי - 14px
- טקסט משנה - 12px
- הערות שוליים - 10px
אתה יכול להגדיר אותם בדרך זו באמצעות פיקסלים למדידה, אבל אז כל משתמש IE 6 ו 7 לא יוכל לשנות את גודל הדף שלך היטב. אז אתה צריך להמיר את הגדלים ems וזה רק עניין של כמה מתמטיקה:
- כותרת 1 - 1.25em (16 x 1.25 = 20)
- כותרת 2 - 1.125em (16 × 1.125 = 18)
- כותרת 3 - 1em (1em = 16px)
- טקסט ראשי - 0.875em (16 x 0.875 = 14)
- טקסט משנה - 0.75em (16 x 0.75 = 12)
- הערות שוליים - 0.625em (16 x 0.625 = 10)
אל תשכח ירושה!
אבל זה לא כל מה שיש להם. הדבר השני שאתה צריך לזכור הוא שהם לוקחים על גודל ההורה. אז אם יש לך אלמנטים מקוננים עם גדלי גופן שונים, אתה יכול בסופו של דבר עם גופן הרבה יותר קטן או גדול יותר ממה שאתה מצפה.
לדוגמה, ייתכן שיהיה לך גיליון סגנונות כזה:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
זה יגרום גופנים כי הם 14px ו 10px עבור הטקסט הראשי והערות השוליים בהתאמה. אבל אם אתה שם הערת שוליים בתוך פסקה, אתה יכול בסופו של דבר עם טקסט זה הוא 8.75px במקום 10px. נסה זאת בעצמך, שים את ה- CSS לעיל ואת ה- HTML הבא למסמך:
גופן זה הוא 14px או 0.875 ems בגובה.
לפסקה זו יש הערת שוליים בה.
אמנם זה רק סעיף הערת שוליים.
טקסט הערת השוליים קשה לקריאה ב 10px, זה כמעט בלתי קריא ב 8.75px.
לכן, כאשר אתה משתמש ems, אתה צריך להיות מודע מאוד את הגדלים של אובייקטים האב, או שאתה תהיה בסופו של דבר עם כמה אלמנטים בגודל מוזר מאוד בדף שלך.