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