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

קייטי המפניוס

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

• כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .

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

הצגת הקוד

• קוד שגורם לזה לפעול: 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 פיקסלים במסכים שרוחבם גדול מ-1024 פיקסלים. הרוחבים האלה תואמים למידות הרוחביות שצוינו ב-CSS.

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

איך לציין כמה רוחבי משבצות

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

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

• 100px

• 33vw

• 20em

• calc(50vw-10px)

הערך הבא אינו רוחב חוקי:

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