כדאי לנסות את ההדגמה הזו
כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא
.כדי לראות את טעינת הדפדפן, צריך לטעון מחדש את האפליקציה בחלונות בגדלים שונים בדפדפן לתמונות שונות ולהשתמש בפריסות שונות בגדלים שונים של דפדפן.
הצגת הקוד
- בודקים ב-
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לא משנה. ניתן לציין את הרוחב של מיקום המודעה באמצעות מגוון של יחידות. כל אלה מידות רוחב חוקיות:
100px33vw20emcalc(50vw-10px)
הרוחב הבא אינו רוחב חוקי:
25%(אי אפשר להשתמש באחוזים עם מאפיין המידה)