כשאתה בונה דף אינטרנט, רוב אנשי המקצוע ממליצים לך לגדול גופנים (ובעצם הכל) עם מידה יחסית כמו ems, exs, אחוזים או פיקסלים. הסיבה לכך היא שאתה באמת לא מכיר את כל הדרכים השונות שבהן מישהו יכול להציג את התוכן שלך. ואם אתה משתמש במדידה מוחלטת (אינץ ', סנטימטרים, מילימטרים, נקודות או פיקאס) זה עשוי להשפיע על תצוגת הדף או על קריאת הדף במכשירים שונים. וגם ממליץ ה- W3C שאתה משתמש ב- ems למידות.
אבל כמה גדול הוא?
על פי W3C em:
"שווה לערך המחושב של המאפיין 'גודל הגופן' של האלמנט עליו הוא משמש. היוצא מן הכלל הוא כאשר 'אותם' מתרחש בערך המאפיין 'גודל הגופן' עצמו, ובמקרה זה הוא מתייחס לגודל הגופן של אלמנט האב. "
במילים אחרות, ל- ems אין גודל מוחלט. הם לוקחים על עצמם את ערכי הגודל שלהם על סמך המקום שהם נמצאים. לרוב מעצבי אתרים, פירוש הדבר שהם נמצאים בדפדפן אינטרנט, כך שגופן בגודל 1em זהה בדיוק לגודל הגופן המוגדר כברירת מחדל עבור אותו דפדפן.
אבל כמה גודל ברירת המחדל הוא גבוה? אין דרך להיות בטוחים ב 100%, מכיוון שלקוחות יכולים לשנות את זה גודל גופן המוגדר כברירת מחדל בדפדפנים שלהם, אך מכיוון שרוב האנשים לא יכולים להניח כי לרוב הדפדפנים גודל הגופן המוגדר כברירת מחדל הוא 16 פיקסלים. אז רוב הזמן
1em = 16 פיקסלים.חשוב בפיקסלים, השתמש ב- ems למדידה
ברגע שאתה יודע שגודל הגופן המוגדר כברירת מחדל הוא 16 פיקסלים, תוכל להשתמש ב- ems כדי לאפשר ללקוחות שלך לשנות את גודל הדף בקלות, אך לחשוב ב פיקסלים עבור גדלי הגופנים שלך. נניח שיש לך מבנה גודל כזה:
- כותרת 1 - 20 פיקסלים
- כותרת 2 - 18 פיקסלים
- כותרת 3 - 16 פיקסלים
- טקסט ראשי - 14 פיקסלים
- טקסט משנה - 12 פיקסלים
- הערות שוליים - 10 פיקסלים
אתה יכול להגדיר אותם כך באמצעות פיקסלים למדידה, אך אז מי שמשתמש ב- IE 6 ו -7 לא יוכל לשנות את גודל הדף שלך היטב. אז כדאי להמיר את הגדלים ל- ems וזה רק עניין של מתמטיקה כלשהי:
- כותרת 1 - 1.25 מטר (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 (16x0.75 = 12)
- הערות שוליים - 0.625em (16 x 0.625 = 10)
אל תשכח מירושה!
אבל זה לא כל מה שיש ל- ems. הדבר הנוסף שאתה צריך לזכור הוא שהם מקבלים על עצמם את גודל ההורה. כך שאם יש לכם אלמנטים מקוננים בגדלי גופנים שונים, תוכלו בסופו של דבר לקבל גופן קטן או גדול ממה שציפיתם.
לדוגמה, ייתכן שיהיה לך גיליון סגנון כזה:
זה יביא לגופנים בגודל 14 פיקסלים ו- 10 פיקסלים לטקסט הראשי ולהערות השוליים בהתאמה. אבל אם אתה שם הערת שוליים בתוך פיסקה, אתה יכול בסופו של דבר לקבל טקסט שהוא 8.75 פיקסלים ולא 10 פיקסלים. נסה זאת בעצמך, שים את האמור לעיל CSS ואת ה- HTML הבא למסמך:
לכן, כאשר אתה משתמש ב- ems, עליך להיות מודע מאוד לגדלים של אובייקטים האב, או בסופו של דבר יהיו לך כמה אלמנטים בגודל מוזר בעמוד שלך.