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