כדאי לנסות את ההדגמה הזו
כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
כדי לראות את טעינת הדפדפן, צריך לטעון מחדש את האפליקציה בחלונות בגדלים שונים בדפדפן לתמונות שונות ולהשתמש בפריסות שונות בגדלים שונים של דפדפן.
הצגת הקוד
- בודקים ב-
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 עד 1024 פיקסלים ובמסכים רחבים מ-1, 024 פיקסלים. האלה
מידות הרוחב תואמות לערכי הרוחב שצוינו ב-CSS.
היכולת לציין ערכי רוחב של מיקומים מרובים מתאימה לפריסות דפים שמשתמשות עיצובים שונים (כלומר, רוחב תמונות) לגדלים שונים של אזור תצוגה.
איך לציין רוחב של כמה מקומות ישיבה
- צריך להשתמש ברשימה שמופרדת בפסיקים כדי לציין כמה ערכי רוחב של מיקומי מודעות. כל פריט ברשימה,
מלבד הפריט האחרון, מורכב מתנאי של מדיה (למשל
max-width
אוmin-width
) ורוחב של משבצת זמן. - הפריט האחרון ברשימה הזו הוא רוחב ברירת המחדל של יחידת הקיבולת. זו ברירת המחדל, לכן אין צורך לציין תנאי מדיה.
- אפשר לציין כמה רוחבי משבצת שרוצים – מספר התמונות שמופיעות
srcset
לא משנה. ניתן לציין את הרוחב של מיקום המודעה באמצעות מגוון של יחידות. כל אלה מידות רוחב חוקיות:
100px
33vw
20em
calc(50vw-10px)
הרוחב הבא אינו רוחב חוקי:
25%
(אי אפשר להשתמש באחוזים עם מאפיין המידה)