קרב יחידות CSS: EMs vs. REMs ... קרב! ?

tl; dr לא * פשוט * השתמש ב- px

קרב יחידות CSS: EMs vs. REMs ... קרב! ?

"שתי יחידות נכנסות! יחידה אחת עוזבת ... ”–ThunderDOM

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

אני אוסף כמה נתונים אודות הדרושים מפתחי אתרים מכלי חינוך מבוססי אינטרנט, ואשמח לקבל את תשובותיך. בתיאור של כל שאלה צירפתי את התשובות שלי כדי שתוכלו להכיר גם אותי טוב יותר! יש ~ 15 שאלות? //t.co/qvGU3dF0DB.

- שם משתמש [ZAYDEK] (@username_ZAYDEK) 8 במרץ 2019

מי ינצח ב FIGHT?

- שם משתמש [ZAYDEK] (@username_ZAYDEK) 13 באפריל 2018

היי! ? אני זיידק ואני כאן בכדי לתת יד בלימוד HTML ו- CSS. במאמר זה נחקור את ההבדל בין היחידות "em" לבין "rem", ונפיק הבנה מעקרונות ראשונים.

כשלמדתי לראשונה HTML ו- CSS, זה היה עולם של כאב כי לא הבנתי את היסודות. לאחר שלמדתי אותי אינטרנט כלשהו, ​​ברצוני לחלוק קצת תובנות ועידודים מכיוון שזה יכול להיות קל יותר ממה שאתה מדמיין.

לימדתי גם קורס HTML / CSS בחינם ב- Scrimba בו אני מלמד כיצד לבנות בלוג יפהפה מאפס *. לחץ כאן להרשמה! ?

Scrimba.com היא פלטפורמה חזיתית אינטראקטיבית בה אתרי אינטרנט מוקלטים כאירועים - ולא סרטונים - וניתן לערוך אותם! ?

יחידת em

לאם יש אטימולוגיה מעניינת. emללא חשד מייצג "M".

זה נראה רקורסיבי, לא? איך יכול em להיות התייחסות עצמית? זה כל כך ערמומי ... כל כך עדין. ובכן אותם - כפי שאנו מכירים זאת ב- CSS - אינם מייצגים את דמות ה- "m", אלא מערכת יחסים עם דמותה של הוריה font-size.

נגיד שאנחנו מגדירים:

   …  .a { font-size: 40px; } .b { font-size: 30px; } 

כאן הגדרנו a wrapperעם שני spanאלמנטים, כל אחד ללא תוכן. אז האתר שלנו נורא! אבל מה שאנחנו יכולים לעשות זה לתת spanלאלמנטים שלנו טקסט כלשהו כדי להדגים כיצד emפועל:

 … hello from inside .a hello from inside .b …

הרגע הוספנו טקסט spanלאלמנטים שלנו . והטקסט מעובד בגדלים שונים, 40pxו 30px. בואו לקבוע את wrapperfont-sizeאל 20px, ולאחר מכן לארגן מחדש שלנו .aואת .bfont-sizeהשימוש em.

 …  .wrapper { font-size: 20px; } .a { font-size: 1.5em; } .b { font-size: 2.0em; }  …

מה? הפסקאות שלנו ' font-sizeהתהפכו! עכשיו אנחנו יכולים להתחיל לחקור כיצד emעובד. לו היינו מגדירים font-sizeכ 20px, 1emזה אומר 1 * 20px. כך גם 1emחסר משמעות.

עם זאת ב CSS שלנו, הגדרנו .afont-sizeכפי 1.5emו .bfont-sizeכמו 2.0em. בהתחשב בכך שההורה שלהם הוא 20px, ביטויים אלה אפוא מעריכים את 30pxו 40px. אז, ההיפך!

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

יחידת ה- rem

remמיועד לשורש . והוא gremמיועד לגראט עם - שאינו קיים.

אז an emהוא מכפיל של יסוד האב שלו font-sizeואילו remהוא מכפיל של יסוד השורש שלו font-size. שורש?

 html <- root / \ head body / \ … …

זה מה שהאתר שלנו הוא - עץ! - עץ "הפוך"!

 …  html { font-size: 20px; } .a { font-size: 1.5rem; } .b { font-size: 2.0rem; }  …

כאן החלפנו .wrapperעם html, כי עכשיו אנחנו משתמשים rem. לאור זאת, .aועל .bהחברה לרשת שלהם font-sizeמן htmlהיסוד, כפי שאמור שלנו .wrapper.

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

יתרה מכך, אנו יכולים להחליף את htmlהאלמנט בכיתה פסאודו:

:root { font-size: 20px; }

שוב - זהה, אבל סמנטי. לכן, remשונה emמכיוון שבמקום לרשת את ההורה font-size, הוא קופץ לאלמנט htmlאו :root. מה אם היינו משתנים:rootfont-size :

:root { font-size: 15px; }

מה קרה? שלנו spanהוא 25% קטנים יותר - הערכה כדי 22.5pxו 30px- כי שינינו את :rootfont-size. וזה רעיון מדהים. כי אנחנו יכולים לכתוב CSS לא בכללים אלא בקשרים.

בואו נסכם: אנו משתמשים emביצירת קשר רדוד עם ההורה הקרוב ביותר של אלמנט המעריך a font-sizeואילו אנו משתמשים remליצירת קשר עמוק עם ה- :root.

שאילתות התקשורת em ו- rem +

רעיון עוד יותר מדהים מזה איך אנחנו משתמשים emו remמשתמש בהם במקביל עבור שאילתות מדיה. שאילתות מדיה מאפשרות לנו לעקוף את CSS בנסיבות מסוימות, כמו רוחב האתר.

לדוגמה:

 …  p { color: green; } @media (max-width: 8.5in) { p { color: blue; } }  …

כאן pמעבד green, אבל אם הרוחב הוא או פחות מ- 8.5inאותו הדבר pקורא blue. ואנחנו יכולים ללכת צעד רחוק מזה: במקום להשתמש בשאילתות מדיה עבור color, אנו יכולים להשתמש בהן ל font-size:

 …  :root { font-size: 20px; } .a { font-size: 1.5rem; } .b { font-size: 2.0rem; } @media (max-width: 650px) { :root { font-size: 3vw; } }  …

אם האתר שלנו הוא שניתנו בבית או פחות 650px, שלנו emואת remבירושה שלהם font-sizeלא כמו 20pxאבל 3vw, או 3% הרוחב של אזור התצוגה שלנו. לאחר שעשינו זאת, חיברנו את ה- CSS שלנו בניגוד להשתלטות עליו.

A final note: em and rem are not limited to font-size. We can use em and rem to describe width, height—wherever CSS expects a size. Compounding this with media queries makes us CSS superheroes.

Learning HTML and CSS doesn’t have to be painful—it can be subtle and these languages can be quite powerful. And em, rem, and grem are some of the most powerful units at our disposal we can use to design websites.

Don’t forget there’s a free course on Scrimba where I teach how to make the same website from *scratch*. Click here to enroll! ?