סטודנטים רבים לעיצוב אתרים רספונסיבי מתקשים להשתמש באחוזים לערכי רוחב. באופן ספציפי, יש בלבול עם האופן שבו הדפדפן מחשב את אותם אחוזים. להלן תמצאו הסבר מפורט כיצד אחוזים עובדים לחישובי רוחב באתר רספונסיבי.
שימוש בפיקסלים לערכי רוחב
כשאתה משתמש פיקסלים כערך רוחב, התוצאות פשוטות מאוד. אם אתה משתמש CSS כדי להגדיר את ערך הרוחב של אלמנט בכותרת המסמך לרוחב 100 פיקסלים, אלמנט זה יהיה בגודל זהה לזה שהגדרת לרוחב 100 פיקסלים בתוכן האתר או תחתונה או באזורים אחרים בדף. פיקסלים הם ערך מוחלט, ולכן 100 פיקסלים הם 100 פיקסלים לא משנה היכן במסמך מופיע אלמנט. לרוע המזל, למרות שקל להבין את ערכי הפיקסלים, הם אינם עובדים טוב עם אתרים רספונסיביים.
איתן מרקוט טבע את המונח "עיצוב אתרים רספונסיבי", המסביר גישה זו כמכילה 3 עיקרי מפתח:
- רשת נוזלית
- מדיה נוזלית
- שאילתות מדיה
שתי הנקודות הראשונות האלה, רשת נוזלים ומדיה נוזלית מושגות על ידי שימוש באחוזים, במקום בפיקסלים, לצורך גודל הערכים.
שימוש באחוזים לערכי רוחב
כאשר אתה משתמש באחוזים כדי לקבוע רוחב עבור אלמנט, הגודל האמיתי שמציג האלמנט ישתנה בהתאם למיקום המסמך. אחוזים הם ערך יחסי, כלומר הגודל המוצג ביחס לאלמנטים אחרים במסמך.
לדוגמה, אם אתה מגדיר את הרוחב של תמונה עד 50%, זה לא אומר שהתמונה תוצג במחצית מגודלה הרגיל. זו תפיסה מוטעית נפוצה.
אם תמונה היא למעשה 600 פיקסלים, אז שימוש בערך CSS כדי להציג אותה ב 50% לא אומר שהיא תהיה ברוחב 300 פיקסלים בדפדפן האינטרנט. ערך אחוז זה מחושב על סמך האלמנט המכיל אותה תמונה, ולא הגודל הממשי של התמונה עצמה. אם המכולה (שיכולה להיות חלוקה או אלמנט HTML אחר) היא ברוחב 1000 פיקסלים, התמונה תוצג ב -500 פיקסלים מכיוון שערך זה הוא 50% מרוחב המיכל. אם האלמנט המכיל הוא 400 פיקסלים, התמונה תוצג רק ב- 200 פיקסלים, מכיוון שערך זה הוא 50% מהמיכל. לתמונה המדוברת כאן גודל של 50% שתלוי לחלוטין באלמנט שמכיל אותה.
זכרו, עיצוב רספונסיבי הוא קולח. פריסות וגדלים ישתנו כמו גודל המסך / שינויים במכשיר. אם אתה חושב על זה במונחים פיזיים, שאינם רשת, זה כמו שיש לך קופסת קרטון שאתה ממלא בחומר אריזה. אם אתה אומר שהקופסה צריכה להיות מלאה בחומר הזה, כמות האריזה שאתה צריך תשתנה בהתאם לגודל הקופסה. הדבר נכון גם לגבי אחוזי רוחב בעיצוב אתרים.
אחוזים על בסיס אחוזים אחרים
בדוגמה של תמונה / מיכל השתמשנו בערכי פיקסל עבור האלמנט המכיל כדי להראות כיצד התמונה המגיבה תוצג. במציאות, האלמנט המכיל ייקבע גם באחוזים והתמונה, או אלמנטים אחרים, בתוך אותו מיכל, יקבלו את הערכים שלהם על פי אחוזים של אחוזים.
הנה דוגמא נוספת.
נניח שיש לך אתר שבו האתר כולו כלול בחטיבה עם סוג של "מיכל" (נוהג נפוץ לעיצוב אתרים). בתוך החלוקה הזו יש שלוש מחלקות אחרות שבסופו של דבר תסגינו להצגה כ -3 עמודות אנכיות.
כעת, תוכל להשתמש ב- CSS כדי להגדיר את הגודל של חלוקת "מיכל" זו 90%. בדוגמה זו, לחלוקת המכולה אין אלמנט אחר שמקיף אותה מלבד הגוף, שלא הגדרנו לערך ספציפי. כברירת מחדל, הגוף יופיע כ 100% מחלון הדפדפן. לכן, אחוז החטיבה "מיכל" יתבסס על גודל חלון הדפדפן. כאשר חלון הדפדפן הזה משתנה בגודלו, כך גם גודל ה"מכולה "הזה. כך שאם חלון הדפדפן הוא 2000 פיקסלים, חלוקה זו תוצג ב 1800 פיקסלים. זה מחושב כ -90 אחוזים משנת 2000 (2000 x .90 = 1800)), שזה גודל הדפדפן.
אם כל אחת מחטיבות ה"קול "שנמצאות בתוך ה"מכולה" מוגדרת לגודל של 30%, אז כל אחת מהן תהיה ברוחב 540 פיקסלים בדוגמה זו. זה מחושב כ -30% מ- 1800 הפיקסלים שהמכולה מעבד (1800 x .30 = 540). אם שינינו את אחוז המכולה ההיא, החלוקות הפנימיות הללו ישתנו גם בגודל שהם מעניקים, מכיוון שהן תלויות באלמנט המיכל.
נניח שחלונות הדפדפן נותרים ברוחב 2000 פיקסלים, אך אנו משנים את ערך האחוז של המכולה ל 80% במקום ל 90%. המשמעות היא שהיא תוצג ברוחב של 1600 פיקסלים כעת (2000 x .80 = 1600). גם אם לא נשנה את ה- CSS בגודל של שלוש חטיבות ה"קול "שלנו ונשאיר אותן על 30%, מעבדים זאת בצורה שונה כעת שכן יש לאלמנט המכיל שלהם, שהוא ההקשר שעליו הם מתאימה לגודל השתנה. שלוש החלוקות הללו יוצגו כעת ברוחב של 480 פיקסלים כל אחד, שהם 30% מ- 1600, או בגודל המכולה 1600 x .30 = 480).
אם לוקחים את זה עוד יותר, אם הייתה תמונה בתוך אחת מחטיבות ה"קול "הללו והתמונה הזו הייתה בגודל של אחוז, ההקשר לגודל שלה יהיה ה"קול" עצמו. כאשר חלוקת ה"קול "ההיא השתנתה בגודלה, כך התמונה בתוכה תשתנה. כך שאם גודל הדפדפן או ה"קונטיינר "ישתנו, זה ישפיע על שלוש חטיבות ה"קול", אשר, בתורן, שנה את גודל התמונה בתוך "העמודה". כפי שאתה יכול לראות, כל אלה קשורים בכל מה שקשור למידות מונחות אחוזים ערכים.
כאשר אתה שוקל כיצד אלמנט בתוך דף אינטרנט יופיע כאשר ערך אחוז משמש לרוחבו, עליך להבין את ההקשר שבו אותו אלמנט שוכן בסימון הדף.
לסיכום
לאחוזים תפקיד קריטי ביצירת הפריסה לאתרים רספונסיביים. בין אם אתה מתמקד בתגובה לתמונות ובין אם אתה משתמש ברוחב אחוזים כדי ליצור רשת נוזלית באמת שגדליה ביחס אחד לשני, הבנת חישובים אלה תהיה נחוצה כדי להשיג את המראה שאתה רצון עז.