ציון רוחבי משבצות מרובים

Katie Hempenius

כדאי לנסות את ההדגמה הזו

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

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

הצגת הקוד

• הקוד שמאפשר את הפעולה הזו נמצא ב-index.html:

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

מה קורה פה?

הערך של המאפיין sizes קובע שרוחב התצוגה של התמונה יהיה: '100% מרוח שדה התצוגה' בשדות תצוגה ברוחב של עד 480 פיקסלים, '50% מרוח שדה התצוגה' במסכים ברוחב של 481 עד 1,024 פיקסלים ו-800 פיקסלים במסכים ברוחב של יותר מ-1,024 פיקסלים. רוחב התמונות תואם לרוחב שצוין ב-CSS.

היכולת לציין כמה רוחבים של משבצות מאפשרת להתאים פריסות של דפים שמשתמשות בסגנונות שונים (כלומר, רוחבים שונים של תמונות) לגדלים שונים של חלון תצוגה.

איך מציינים כמה רוחבי משבצות

• כדי לציין כמה רוחבים של משבצות, צריך להשתמש ברשימה מופרדת בפסיקים. כל פריט ברשימה, מלבד הפריט האחרון, מורכב מתנאי מדיה (למשל max-width או min-width) ורוחבו של שטח הפרסום.
• הפריט האחרון ברשימה הזו הוא רוחב ברירת המחדל של המודעות. זוהי ברירת המחדל, ולכן אין צורך לציין תנאי מדיה.
• אפשר לציין כמה רוחבי משבצות שרוצים – מספר התמונות שמופיעות ב-srcset לא משנה.

• אפשר לציין את רוחב החריץ באמצעות מגוון יחידות. אלה כל הרוחב החוקיים:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

הרוחב הבא לא תקין:

• 25% (אי אפשר להשתמש באחוזים עם מאפיין המידה)