מדריך CSS יחידות Viewport vw, vh, vmin, vmax

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

למרות ש תיעוד של W3C על יחידות ויפורט מכיל את כל מה שניתן להכניס לתיאוריה, זה לא verbose מאוד. אז, במאמר זה, אנו נסתכל על איך יחידות CSS אלה עבודה בפועל.

גובה Viewport (ה) רוחב רוחב התצוגה (ו"ו)

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

ה ו"ו ו ה יחידות לעמוד על אחוז רוחב וגובה של viewport בפועל. הם יכולים לקחת ערך בין 0 ל -100 לפי הכללים הבאים:

 100vw = 100% מרוחב התצוגה 1vw = 1% מרוחב התצוגה 100vh = 100% מגובה התצוגה 1vh = 1% מגובה התצוגה 

הפרשי אחוז ליחידות

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

דוגמה: מקטעים במסך מלא

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

ה HTML הוא די פשוט; פשוט יש לנו שלושה חלקים זה בזה ואנחנו רוצים כל אחד מהם לכסות את כל המסך (אך לא יותר).

ב CSS, אנו משתמשים 100vh כ גובה הערך 100% כפי ש רוחב. אנחנו לא משתמשים ו"ו יחידה כאן כברירת מחדל, גלילה הם גם הוסיף לגודל התצוגה. אז, אם השתמשנו width: 100vw; כלל א גלילה אופקי יופיע ב בתחתית חלון הדפדפן.

 * מרווח: 0; ריפוד: 0;  קטע background-size: cover; background-position: center; רוחב: 100%; גובה: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

בהדגמה gif למטה, אתה יכול לראות את זה ה J באמת תגובה יחידה.

על פי מסמכי W3C, הנ"ל בעיה גלילה אופקי ניתן לפתור על ידי הוספת overflow: auto; הכלל אל יסוד השורש. פתרון זה רק עובד באופן חלקי, אם כי. גלילה האופקי, אכן, נעלמת אבל רוחב J עדיין מחושב בהתבסס על רוחב התצוגה (הצדדי כלול), כך האלמנטים יהיה מעט גדול יותר ממה שהם צריכים להיות.

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

במקרים אחרים

אם אתה מעוניין ב במקרים אחרים ו"ו ו ה Lullabot יש מאמר נהדר כי רשימות קומץ דוגמאות של חיים אמיתיים (עם הדגמות Codepen), כגון:

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

Opera.dev יש גם הדרכה קצר על איך אתה יכול לקחת מינוף של ו"ו יחידה ב יצירת טיפוגרפיה תגובה.

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

Viewport min (vmin) & מקסימום viewport (vmax)

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

 100vmin = 100vw או 100vh, המוקדם מביניהם 1vmin = 1vw או 1vh, הקטן מביניהם 100vmax = 100vw או 100vh, הגדול מביניהם 1vmax = 1vw או 1vh, הגדול מביניהם 

אז, במקרה של אוריינטציה, 100min שווה ל 100v, כמו נקודת מבט קטן יותר אופקית מאשר אנכית. מאותה הסיבה, 100vmax יהיה שווה ל 100vh.

באופן דומה, במקרה של א אוריינטציה לרוחב, 100min שווה ל 100vh, כמו נקודת מבט קטן אנכית מאשר אופקית. ובוודאי, 100vmax יהיה שווה ל 100v כאן.

דוגמה: הפיכת טקסטים של גיבור לקריא בכל מסך

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

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

הנה הרעיון העיקרי של הפתרון שלהם:

 h1 font-size: 20vmin; משפחת גופנים: Avenir, sans-serif; משקל גופן: 900; text-align: center;  

בהדגמה Codepen, אתה יכול לבדוק איך vmin פותר את בעיית הקריאות של טקסטים של גיבור. גש אל “עמוד מלא” View on Codeפנים, שנה את גודל חלון הדפדפן שלך הן אופקית והן אנכית כדי לראות איך השינויים בטקסט הגיבור.

תמיכה בדפדפן

כפי שניתן לראות בתרשים CanIUse להלן, תמיכה הדפדפן הוא טוב יחסית עבור יחידות תצוגה. עם זאת, זכור כי חלק מהגירסאות של IE ו- Edge אינן תומכות vmax. כמו כן, iOS 6 ו - 7 יש בעיה עם ה יחידה, אשר נקבע ב- iOS 8.