לאחר שהכרנו את יחידות המידה הבסיסיות, px, em ו- %, בואו נכיר יחידה נוספת - rem, ונחקור את ההבדל בינה לבין em.

אבל ראשית, בואו ניזכר ברעיון הבסיסי של em.

ב- em אפשר להשתמש להגדרה של גודל פונט. ערך ברירת המחדל של em הוא 16 פיקסלים, לכן ה-CSS הזה:

#par1 {
   font-size: 16px;
}

וה-CSS הזה:

#par1 {
   font-size: 1em;
}

ייתנו אותה תוצאה:

 

 

 

em היא יחידת מידה יחסית

העניין ב- em, הוא שהוא מידה שיחסית לגודל הפונט שמוגדר כרגע. אז אם נעטוף ב- div את הפסקה שמכילה את הטקסט:

<body>
   <h1>em VS rem</h1>
   <div id="contDiv">
      <p id="par1">
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia quos earum nam fugiat nihil veniam voluptatum,
         accusantium ipsa enim delectus laboriosam odit deserunt cum corrupti doloremque neque velit magnam ab id
         voluptatibus necessitatibus vitae dolores.
      </p>
   </div>
</body>

כל שינוי בגודל הפונט של ה- div, ישפיע על הגודל של הפונט ב- p, אף על פי שה- property של גודל הפונט של ה- p נשאר 1em. למשל עבור ה- CSS הבא:

#contDiv {
   font-size: 32px;
}

#par1 {
   font-size: 1em;
}

נקבל את התוצאה הבאה:

 

 

כלומר גודל הטקסט של הפסקה גדל פי 2.

הסיבה היא, כאמור, ש- em אינו גודל אבסולוטי, אלא מידה שיחסית לגודל הפונט.

מעבר לכך, em-ים מצטברים, כלומר אם השתמשנו ב- em באלמנט הורה ובאלמנט ילד, ה- em הסופי של אלמנט הילד הוא המכפלה. כלומר עבור ה- CSS הבא:

#contDiv {
   font-size: 2em;
}

#par1 {
   font-size: 1em;
}

מקבלים:

 

 

כלומר שוב מקבלים פונט בגודל כפול (32 פיקסלים), אף על פי שגודל הפונט של הפסקה עצמה היא 1em. זאת כיוון שהגודל הסופי ב- em הוא מכפלת הגדלים של אלמנט ההורה ואלמנט הילד (1em*2em=2em).

כמו שראינו בפוסט הקודם, ההתנהגות הזו של קביעת גודל על ידי em באה לידי ביטוי לא רק בטקטס, אלא גם בתמונות - כלומר אם נקבע גודל של תמונה על ידי em, גודלה בפועל יושפע מגודל הפונט.

rem היא יחידת מידה קבועה (בערך)

לפעמים ההתנהגות היחסית הזו של em, יכולה ליצור דברים קצת לא צפויים. חשבו למשל על קוד ה- HTML הבא, שבו מגדירים כותרת h2 בתוך div שבעצמו נמצאת בתוך div:

<body>
   <h1>em VS rem</h1>
   <div id="extDiv">
      <div id="intDiv">
         <h2>This is an h2 heading</h2>
      </div>
   </div>
</body>

ועכשיו, נקבע את גודל הפונט ב- CSS:

#extDiv {
   font-size: 2em;
}

#intDiv {
   font-size: 1em;
}

#intDiv h2 {
   font-size: 2em;
}

מתקבלת התוצאה הבאה:

 

 

כלומר, הגודל של הכותרת h2 הוא ממש עצום, אף על פי שבמבט ראשון נראה שעל פי ה- CSS, הגדרת הגודל שלה הוא 2em. אבל כמו שאמרנו, em היא מידה יחסית ומצטברת, לכן הגודל בפועל הוא מכפלה של כל ה- em של האלמנטים בהיררכיה, עד שמגיעים לכותרת מסוג h2 שלנו.

במקרים כאלו, השימוש המרובה ב- em דורש חישובים מורכבים כדי להגיד בדיוק לגודל שרוצים, ולכן יש אפשרות נוספת - rem.

rem זה קיצור של root em, והוא נקרא כך כיוון שבמקום להיות יחסי לגודל הפונט באלמנט שבו אנחנו נמצאים, הוא יחסי לגודל הפונט באלמנט שבשורש של המסמך. שורש המסמך הוא האלמנט שמחזיק את כל שאר האלמנטים, או במילים אחרות, האלמנט html.

אז אם נבחן שוב את אותה דוגמה, אבל במקום להגדיר את הגדלים עם em, נגדיר אותם עם rem:

#extDiv {
   font-size: 2rem;
}

#intDiv {
   font-size: 1rem;
}

#intDiv h2 {
   font-size: 2rem;
}

מקבלים:

 

 

וכאן הגודל של h2 הוא בדיוק פי 2 מגודל הפונט הרגיל, כי אין השפעה לגודל הפונט של שאר האיברים בהיררכיה.

חשוב לשים לב ששינוי גודל הפונט של ה- html עצמו, כן ישנה את הגודל של כל אלמנט שמוגדר עם rem:

html {
   font-size: 32px;
}

#extDiv {
   font-size: 2rem;
}

#intDiv {
   font-size: 1rem;
}

#intDiv h2 {
   font-size: 2rem;
}

ומקבלים:

 

 

אבל כאמור, זה כיוון ש- html הוא ה- root, לכן הוא האלמנט היחיד שגודל הפונט שלו משפיע.

גודל של תמונות - em לעומת rem

כאשר מדברים על גודל של תמונות, ההשפעה דומה. נשים תמונה בתוך div:

<body>
   <h1>em VS rem</h1>
   <div id="extDiv">
      <img src="./backgrounds/pexels-jaime-reimer-2662116.jpg" alt="landscape image">
   </div>
</body>

ונקבע את גודלה באמצעות em:

#extDiv {
   font-size: 2em;
}

img {
   width: 30em;
}

מתקבל:

 

 

הסיבה היא, שוב, ש- em היא יחידה מצטברת, לכן יש השפעה של גודל הפונט של ה- div וגם של התמונה, לכן רוחב התמונה הסופי הוא 60em, או 60*16=960 פיקסלים.

אם, לעומת זאת, נשתמש ב- rem:

#extDiv {
   font-size: 2rem;
}

img {
   width: 30rem;
}

מקבלים:

 

 

כיוון שעכשיו הגודל נמדד ביחס לאלמנט השורש html, לכן גודל התמונה הסופי הוא 30*16=480 פיקסלים.