אז מה הן בעצם היחידות המוזרות האלו? כבר התרגלנו לפיקסלים (px) ול EM , ל REM ולאחוזים אבל מאיפה הגיעו לעולם vh ו vw? ובכן – vw הוא יחידה המציינת את רוחב התצוגה (view width) והכוונה כמובן לרוחב הדפדפן (viewport) ו view height הוא גובה המסך אם מצויין vh. למה אנחנו צריכים עוד יחידות למדידה? לא מספיק מה שכבר יש? אז ככה – היחידות האלו נפלאות – במיוחד בהקשר של עיצוב רספונסיבי.
ב tutorialzine יש הסבר מצויין לחישוב והבנה של המידות בפוסט שלהם על Simplify Your Stylesheets With The Magical CSS Viewport Units. אני אביא את עיקרי הדברים (בעברית ;)) :
נניח שהמסך שלנו ברוחב של 1000px ובגובה של 800px במקרה כזה:
- vw מייצג אחוז מתוך הרוחב של המסך. כלומר 50vw יהיו שווים ל 500px
- vh מייצג אחוז מתוך הגובה של המסך. כלומר 50vh במקרה שלנו יהיה שווה ל 400px
ומה טוב יותר מדוגמה כדי להבין ולראות כמה זה טוב 🙂
כשאנחנו מגדירים גובה של 100% על אלמנט אין לזה משמעות אם ל"אבא" שלו אין גובה מוגדר (והגדרת גובה הוא בכלל דבר שעדיף להמנע ממנו). אבל כשאנחנו נותנים לאלמנט הגדרה של height: 100vh אנחנו תוחמים את הגובה שלו ביחס לגובה של המסך.
אם יש לנו div שאנחנו רוצים שימלא את כל המסך כשאנחנו מסתכלים במובייל – אם ניתן לו את ההגדרה של height: 100vh הוא ימלא את כל גובה המסך. כך יצא – שתמיד – ולא משנה באיזה מסך / מכשיר אנחנו ה div ימלא את כל המסך.
באתר סיינטיפיק אמריקן ישראל השתמשתי במאפיין שנקרא object-fit. המאפיין object-fit מדמה את המאפיין background-size על תמונה שנמצאת בתוך הקוד (img) ומאפשר למתוח אותה או להתאים אותה לרוחב ע"י שימוש ב cover (או contain או fill וכו'). העניין הוא שכדי להציג רק חלק ממנה (את החלק המרכזי שלה במקרה שלנו) הייתי צריכה להגדיר גובה. 50% למשל – לא נתן כמובן כלום ולא רציתי להגדיר גובה קבוע כי אז העמוד יראה שונה במכשירים השונים, וזה הופך את כל האתר למאוד לא דינאמי. לפה בדיוק התאימה היחידה של vh שתחמה את התמונה ב 50% אחוז של גובה המכשיר ושמרה על מבנה העמוד במכשירים השונים:
למה שימוש ב vw עדיף על פני שימוש באחוזים?
הגדרה של רוחב באחוזים היא X אחוז של ה"הורה" של האלמנט. ומה אם אנחנו רוצים שהרוחב שלנו יהיה גדול יותר מהאלמנט העוטף? פה vw בא לעזרה 🙂 ואיך אפשר להבין באמת ללא דוגמה?
בעיצוב של כותרת של אזורים בדף ראשי, היה קו חוצה שנמתח מקצה לקצה של רוחב המסך. את הקו החוצה עיצבתי בעזרת פסדו אלמנט before: של הכותרת. כשנתתי לו הגדרה של width: 100% הקו החוצה היה קצר ונתחם ברוחב של ה header (שהיה מוגדר כ display: inline-block בשביל למרכז אותו) ולכן הרוחב שלו היה הרוחב של הטקסט ועוד ה padding הימני והשמאלי. הגדרה של width: 100vw מתחה את הקו מקצה לקצה של רוחב המסך.
בתמונה משמאל אפשר לראות את הקו האחורי תחום בתוך ה header ולעומתו מצד ימין את הקו נמתח מקצה לקצה.
בפוסט של bitsofco יש הסבר ברור מאוד להבדל בין vh/vw לבין הגדרה של רוחב באחוזים.
שימוש נוסף שאפשר לעשות עם היחידות של vw ו vh הוא בטיפול בטיפוגרפיה של האתר, כלומר שליטה על גודל פונט. העובדה שעדיף שלא להגדיר את גודל הפונט בפיקסלים כבר ידועה וברורה, אבל גם הגדרת הפונטים ב em או rem לא הופכת את הטקסטים לרספונסיביים באופן אוטומטי. ושוב vw – to the rescue 🙂
בעיצוב תבנית ייעודית (למכשירים חכמים בלבד), לאתר חינוך פיננסי חטיבת ביניים, היה עיצוב של 2 טורים של הפניות לפוסטים שהכילו מספר + שם, נתקלנו בבעיה עם גודל בפונט. התבנית הייתה מיודעת למכשירים חכמים בלבד מה שאמר שמנעד המסכים לא היה גדול במיוחד – בין 320 פיסקלים לקטן ביותר ועד 600 פיקסלים לגדול ביותר, באמת לא מקום להיתקל בבעיות רספונסיביות גדולות ועדיין – הפרטים הקטנים הם אלה שהופכים את האתר לשלם ומעוצב.
את הרשימה סידרנו ע"י שימוש ב flex (אהובי משכבר הימים. flex ואני, FLEX ואני – מעמיקים יחסים), וכל פריט קיבל רוחב של 48% מה ששמר על המבנה והפרופורציה, אבל ככל שהפריט גדל (במכשירים רחבים כמו סמסונג note למשל) הטקסט שבתוכו נראה מוזר ולא מותאם לגודל של האלמנט שלו. הגדרת גודל הפונט ב vw עזרה לשמור על אחידות ופרופורציות בין גודל הפריט והטקסט שבתוכו.
מלבד היחידות vh ו vw ישנם עוד 2 מידות: vmin ו vmax. לא יצא לי להשתמש בהם וגם התמיכה שלהם בחלק מהדפדפנים חלקית, אבל אי אפשר להתעלם מהם.
הסבר על המידות האלו מתוך הפוסט של tutorialzine:
- vmin – A percentage of the minimum of the two. In our example 50vmin = 400px since we are in landscape mode.
- vmax – A percentage of the bigger dimension. 50vmax = 500px.
ל css-tricks יש פוסט על שימוש במידות של viewport בהקשר של טיפוגרפיה והחשיבות של לתת גודל מינימום ומקסימום כדי לשמור על קריאות.
עד כאן על מידות הקסם – מי ייתן ואשתמש בהם יותר 🙂
עידכון (21.06.2017): פוסט מעמיק על שימושים שונים ב vh + vw.
עידכון (01.2023): המון חידושים ב css הביאו איתם בין היתר גם עוד יחידות מידה, אפשר לקרוא עליהם בפוסט: New Viewport Units
תודה, מאמר ממש ברור וקל להבנה. עשית לי סדר בראש.
ובכלל אני ממש ממש שמחה שגיליתי את הבלוג שלך וכל הפוסטים ממש מובנים, זורמים וכיפיים.
יש אפשרות להירשם לניוזלטר?
תודה רבה, שמחתי 🙂
לצערי כרגע אין אפשרות – אני מקווה שעניין העדכונים במייל יסודר בקרוב.