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

Katie Hempenius
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% (אי אפשר להשתמש באחוזים עם מאפיין המידה)