המדריך המלא ליחידות מידה רספונסיביות ב-CSS

מדריך שיעשה לכם סדר בנוגע ליחידות מידה רספונסיביות ב-CSS.
מהו rem? במה הוא שונה מ-em? מתי נשתמש ב-vw ועוד.

יחידות מידה רספונסיביות הוא נושא חובה עבור מפתחי Frond-End הרוצים לשפר את היכולות הרספונסיביות שלהם.
יחידות מידה קבועות כמו פיקסלים (px) הן מצויינות, ובהחלט מותר להשתמש בהן אבל זה הזמן להכיר את הדרך הנוספת, החדישה יותר והרספונסיבית יותר, Bootstrap 4 למשל, כבר עושה שימוש ב-rem.

rem

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

p {
    font-size: 1rem;
}

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

ניתן לראות שגודל הפונט השתנה וכעת 1rem שווה ל-20px:

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

html {
    font-size: 16px;
}

em

em היא יחידת מידה אשר מאוד דומה בהתנהגותה ל-rem אך עם הבדל משמעותי אחד. אם rem "מכפיל" את גודל הפונט המוגדר ב-html אז em "מכפיל" את גודל הפונט המוגדר באלמנט האב.
דוגמא שתעשה קצת סדר:

.container {
    font-size:18px;
}
p {
    font-size:1em;
}

<div class="container">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum nulla accusantium ipsum quam animi impedit sint. Eum voluptate omnis ducimus, commodi praesentium inventore ratione amet modi, doloremque quaerat, illum fugiat.
    </p>
</div>

והתוצאה:

יחידות מידה viewport

(vw (viewpost width היא יחידת מידה אשר מייצגת את רוחב החלון המוצג, כלומר, הגדרה של 100vw תגרום לאלמנט לקבל את מלוא רוחב החלון.
כנ"ל לגבי (vh (viewport height, רק בהקשר של גובה.
דוגמה:

body {
    background: #000;
}
.myBox {
    width: 50vw;
    height: 75vh;
    background: #A76E6E;
}

<div class="myBox"></div>

התוצאה:

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

אז למה לא אחוזים?

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

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)