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

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

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

אורך מוחלט

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

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

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

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

1. Px (פיקסל)

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

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

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

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

להלן דוגמה:-

<div class="מְכוֹלָה">
<div>
<h1>זו פסקה</h1>
<ע>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 אומניס ב! 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>

.מְכוֹלָה {
 רוחב: 100%;
 גובה: 100Vh;
 תצוגה: flex;
 להצדיק-תוכן: מרכז;
 align-items: center;
}
.מְכוֹלָהdiv {
 רוחב מקסימלי: 500 פיקסלים;
 ריפוד: 5px 20px;
 גבול: 1px אפור מוצק;
 border-radius: 10px;
}
p {
 גודל גופן: 16px;
}

תְפוּקָה

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

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

2. Em (M)

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

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

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

<div class="div-one">
<p class="אחד מהם">1 em מבוסס על 10px</p>
<p class="שניים">2 em מבוסס על 10px</p>
</div>
<div class="div-2">
<p class="אחד מהם">1 em מבוסס על 10px</p>
<p class="שניים">2 em מבוסס על 10px</p>
</div>
</div>

.div-one {
 גודל גופן: 15px;
}
.div-two {
 גודל גופן: 20px;
}
.one-em {
 גודל גופן: 1em;
}
.שניים {
 גודל גופן: 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="אחד מהם">1 em מבוסס על מיכל (40px)</p>
<p class="שניים">2 em מבוסס על מיכל (40px)</p>
<!-- REM -->
<p class="רמי אחד">1 rem מבוסס על root (16px)</p>
<p class="שני רמי">2 rem מבוסס על root (16px)</p>
</div>

.div-one {
 גודל גופן: 40px;
}
.one-em {
 גודל גופן: 1em;
}
.שניים {
 גודל גופן: 2em;
}
.one-rem {
 גודל גופן: 1rem;
}
.שניים {
 גודל גופן: 2rem;
}

תְפוּקָה

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

Px לעומת Em vs. רם: איזו יחידה היא הטובה ביותר?

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