Px vs. Em vs. Rem: באיזו יחידת CSS כדאי להשתמש?

אתה הולך ללמוד כמה יחידות CSS להתאמה אישית של גודל הגופן של טקסט בעת בניית דפי אינטרנט. ישנן יחידות רבות כגון pt, pc, ex וכו', אך ברוב המקרים כדאי להתמקד בשלוש היחידות הפופולריות ביותר: px, em ו-rem. מפתחים רבים אינם מבינים בדרך כלל מה ההבדלים בין היחידות הללו; לכן, להלן הסבר מפורט על יחידות אלה.

איפור של סרטון היום

לפני שתמשיך, שים לב שיש שני סוגים של אורכי יחידות: מוּחלָט ו קרוב משפחה .

---

---

אורך מוחלט

יחידות האורך המוחלטות קבועות, ואורך המתבטא בכל אחת מהן יופיע כגודל זה בדיוק.

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

יחידה	תיאור
ס'מ	סנטימטרים
מ'מ	מילימטרים
ב	אינץ' (1 אינץ' = 96 פיקסלים = 2.54 ס'מ)
פיקסלים *	פיקסלים (1 פיקסלים = 1/96 מתוך 1 אינץ')
pt	נקודות (1 נק' = 1/72 מתוך 1 אינץ')
PC	אלים (1 יחידה = 12 נק')

אורכים יחסיים

יחידות אורך יחסי מציינות אורך ביחס למאפיין אורך אחר. יחידות אורך יחסי מתרחבות טוב יותר בין מדיום רינדור שונה.

יחידה	ביחס ל
ב*	יחסית לגודל הגופן של האלמנט (2em פירושו פי 2 מהגודל של הגופן הנוכחי)
לְשֶׁעָבַר	יחסית לגובה x של הגופן הנוכחי (בשימוש נדיר)
ch	יחסית לרוחב ה-'0' (אפס)
rem*	יחסית לגודל הגופן של אלמנט הבסיס
vw	יחסית ל-1% מרוחב נקודת התצוגה*
vh	יחסית ל-1% מגובה נקודת התצוגה*
דקה	יחסית ל-1% מהממד הקטן יותר של נקודת התצוגה*
vmax	יחסית ל-1% מהממד הגדול יותר של נקודת התצוגה*
%	יחסית לאלמנט האב

1. פיקסלים (פיקסל)

Pixel היא כנראה היחידה הנפוצה ביותר ב-CSS והן פופולריות מאוד בכל הנוגע להגדרת גודל הגופן של טקסט בדפי אינטרנט. פיקסל אחד (1px) מוגדר כ-1/96 אינץ' במדיה מודפסת.

עם זאת, במסכי מחשב, הם אינם קשורים בדרך כלל למידות ממשיות כמו סנטימטרים ואינצ'ים כפי שאתה עשוי לחשוב; הם פשוט מוגדרים כקטנים אך גלויים. מה שנחשב גלוי תלוי במכשיר.

---

---

למכשירים שונים יש מספר שונה של פיקסלים לאינץ' על המסכים שלהם, מה שמכונה צפיפות הפיקסלים. אם השתמשת במספר הפיקסלים הפיזיים במסך של מכשיר כדי לקבוע את גודל התוכן במכשיר זה, תהיה לך בעיה לגרום לדברים להיראות זהים על פני מסכים בכל הגדלים.

כאן נכנס לתמונה יחס הפיקסלים של המכשיר. זו בעצם רק דרך לחשב כמה מקום יתפוס פיקסל CSS (1px) במסך המכשיר שיאפשר לו להיראות באותו גודל בהשוואה למכשיר אחר.

---

---

להלן דוגמה:-

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

תְפוּקָה

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

שימו לב איך הטקסט בשתי התיבות הוא באותו גודל, כך בעצם הפיקסל עובד. זה עוזר לתוכן אינטרנט (לא רק טקסט) להיראות באותו גודל בין מכשירים.

2. אני (M)

יחידת ה-em קיבלה את שמה מהאות הגדולה 'M' (em) שכן רוב יחידות ה-CSS מגיעות מטיפוגרפיה. הוא משתמש בגודל הגופן הנוכחי של רכיב האב כבסיס שלו. ניתן להשתמש בו כדי להגדיל או להקטין את גודל הגופן של אלמנט בהתבסס על גודל הגופן שעבר בירושה מהאב.

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

עם זאת, אם תיתן לפסקה אחרת את גודל הגופן של 2em, זה יתורגם ל-32px. שקול את הדוגמה שלהלן:

אפס את סיסמת מזהה Apple באמצעות דוא"ל

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

תְפוּקָה

אתה יכול לראות כיצד הם יכולים להגדיל את גודל הטקסט וכיצד הוא מושפע מגודל הגופן הנוכחי שעבר בירושה ממיכל האב. לא מומלץ להשתמש בהם, במיוחד בתוך דפים מורכבים.

אם לא משתמשים בהם כראוי, אתה עלול להיתקל בבעיות קנה מידה שבהן אלמנטים עשויים שלא להיות בגודל כראוי בהתבסס על ירושה מורכבת של גדלים בעץ ה-DOM.

3. Rem (Root Em)

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

ברירת המחדל של גודל הגופן של דפדפן אינטרנט היא בדרך כלל 16px ולכן 1rem יהיה 16px ו-2rem יהיה 32px. עם זאת, במקרה בו גודל הגופן הבסיסי משתנה ל-10px למשל; 1rem יהיה 10px ו-2rem יהיה 20px.

הנה דוגמה כדי להבהיר את הדברים:

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
} 

תְפוּקָה

כפי שאתה יכול לראות, הפסקאות המוגדרות עם יחידות REM אינן מופרעות לחלוטין מגודל הגופן המוצהר במיכל שלנו ומעובדות אך ורק ביחס ל- גודל גופן שורש מוגדר בבורר רכיבי HTML.

Px vs. Em vs. Rem: איזו יחידה היא הטובה ביותר?

Em לא מומלץ בגלל האפשרות שיש היררכיה מורכבת של אלמנטים מקוננים. REM בדרך כלל משתנה בהתאם לגודל הגופן החדש המוגדר כברירת מחדל/בסיס המצוין בהגדרות הדפדפן, בניגוד ל-PX. זה מסביר מדוע עליך להשתמש ב-REM בעת עבודה עם תוכן טקסט בדפי האינטרנט שלך. REM מנצח במירוץ. סגנון טוב יותר והרחבת התוכן שלך עם REM מוסיפים כישרון לאתר שלך מכיוון שהוא אידיאלי עבור יוצרי אתרים. מדידות נקודתיות של התוכן שלך יכתיבו את המראה והתחושה של האתר שלך, עם זאת, תצטרך להיות יצירתי.