כדאי לנסות את ההדגמה הזו
כדי לראות תצוגה מקדימה של האתר, מקישים על 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%
(אי אפשר להשתמש באחוזים עם מאפיין המידות)