אחוז ערכים ב CSS יכול להיות מסובך. כשאתה קובע את הגובה נכס CSS של אלמנט ל 100% ממה בדיוק אתה מגדיר אותו ל 100%? זו השאלה העיקרית שנתקלת בה כשאתה מתמודד עם אחוזים ב- CSS, וככל שהפריסות הופכות מורכבות יותר, זה הופך להיות הרבה יותר קשה לעקוב אחר האחוזים, וכתוצאה מכך התנהגות מוזרה בעליל, אם לא זָהִיר.
לעבודה עם אחוזים אכן יש יתרון בולט; פריסות מבוססות אחוזים מסתגלות אוטומטית לגדלי מסך שונים. לכן השימוש באחוזים חיוני בתכנון רספונסיבי. מערכות רשת פופולריות ומסגרות CSS משתמשות בערכי אחוזים כדי ליצור את הרשתות המגיבות שלהן.
ברור שיש מצבים מסוימים שמתאימים יותר לערכים סטטיים ואחרים שעובדים הרבה יותר טוב עם משהו מסתגל, כמו אחוזים. יהיה עליך להחליט איזה מסלול לקחת עם האלמנטים בעיצוב שלך.
יחידות סטטיות
פיקסלים הם סטטיים. עשרה פיקסלים במכשיר אחד הם עשרה פיקסלים בכל מכשיר. בטח, יש דברים כמו צפיפות והדרך שבה מכשיר מפרש בפועל פיקסל, אבל לעולם לא תראה שינויים משמעותיים מכיוון שהמסך בגודל שונה.
בעזרת CSS תוכלו להגדיר בקלות רכיבי אלמנט גובה בפיקסלים, וזה יישאר זהה. זה צפוי.
div {
גובה: 20 פיקסלים;
}
זה לא ישתנה אלא אם תשנה את זה עם JavaScript או משהו דומה.
עכשיו יש צד אחר במטבע הזה. זה לא ישתנה. פירוש הדבר שתצטרך למדוד הכל במדויק, וגם אז האתר שלך לא יעבוד בכל המכשירים. זו הסיבה שיחידות סטטיות נוטות לעבוד טוב יותר עבור אלמנטים ילדים, מדיה ודברים שיתחילו להתעוות ולהיראות מוזרים אם הם נמתחים וגדלים.
הגדרת גובה אלמנט ל 100%
האם כאשר אתה מגדיר את גובה האלמנט ל- 100%, האם הוא משתרע על כל גובה המסך? לִפְעָמִים. CSS מתייחס תמיד לערכי אחוז כאחוזים מאלמנט האב.
ללא אלמנט הורי
אם יצרת טרי זה רק בתג הגוף של האתר שלך, 100% ככל הנראה ישתווה לגובה המסך. זאת אלא אם כן הגדרת ערך גובה עבור ה-.
ה- HTML:
ה- CSS:
div {
גובה: 100%;
}
זֶה גובה האלמנט יהיה שווה לגובה המסך. כברירת מחדל, ה- משתרע על פני כל המסך, כך שזה הבסיס בו משתמש הדפדפן שלך בחישוב גובה האלמנט.
עם אלמנט הורי עם גובה סטטי
כאשר האלמנט שלך מקונן בתוך אלמנט אחר, ה- דפדפן ישתמש בגובה של אלמנט האב לחישוב ערך של 100%. לכן, אם האלמנט שלך נמצא בתוך אלמנט אחר שגובהו 100 פיקסלים, ואתה מגדיר את גובה אלמנט הילד ל- 100%. אלמנט הילד יהיה בגובה 100 פיקסלים.
ה- HTML:
ה- CSS:
# אב {
גובה: 100 פיקסלים;
}
#child {
גובה: 100%;
}
הגובה העומד לרשות אלמנט הילד מוגבל על ידי גובה ההורה.
עם אלמנט הורי עם אחוז גובה
זה אולי נראה אינטואיטיבי, אבל אתה יכול להגדיר את גובה האלמנט לאחוז אחוז. כאשר לאלמנט יש אלמנט אב שגם הגובה שלו מוגדר כערך אחוז, הדפדפן ישתמש באותו ערך כמו ההורה, אותו הוא כבר חישב על סמך האב שלו. הסיבה לכך היא ש 100% מערך הוא עדיין הערך הזה.
ה- CSS:
# אב {
גובה: 75%;
}
#child {
גובה: 100%;
}
במקרה זה, גובה אלמנט האב הוא 75% מסך המסך. הילד, אם כן, הוא גם 100% מהגובה הכללי הזמין.
עם אלמנט הורי ללא גובה
מעניין שכאשר לאלמנט האב אין גובה מוגדר, הדפדפן ימשיך לעלות ברמה אחר רמה עד שימצא ערך קונקרטי שהוא יכול לעבוד איתו. אם זה עושה את זה עד ל מבלי למצוא דבר, הדפדפן יוגדר כברירת מחדל לגובה המסך, וייתן לאלמנט שלך גובה שווה ערך.
ה- HTML:
ה- CSS:
# הורים {}
#child {
גובה: 100%;
}
אלמנט הילד משתרע עד החלק העליון והתחתון של המסך.
יחידות הנוף
מכיוון שחישוב עם יחידות אחוז יכול להיות מסובך, וכל אלמנט קשור להורה שלו, יש סט יחידות שמתעלמות מכל אלה ומגדלי אלמנטים בסיסיים ישירות מהמסך הזמין מֶרחָב. אלה יחידות הנוף, והן נותנות לך גודל ישיר בהתבסס על גובה המסך או רוחבו, לא משנה היכן נמצא האלמנט.
לקביעת אלמנטים גוֹבַה שווה לגובה המסך, הגדר את ערך הגובה שלו ל- 100 וואט.
div {
גובה: 100vh;
}
קל לשבור את הפריסה שלך בכך, ותצטרך להיות מודע לאילו אלמנטים אחרים יהיו הושפע, אך נמל התצוגה הוא ללא ספק הדרך הישירה ביותר להגדיר את גובה האלמנט ל 100% מה מָסָך.