כדאי לנסות את ההדגמה הזו
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא
. - טוענים מחדש את האפליקציה בגדלים שונים של דפדפנים. שימו לב כמה שונות התמונות: הן לא רק בגדלים שונים, אלא גם בחיתוכים וביחסי גובה-רוחב שונים.
מה קורה פה?
הכוונה האומנותית מציגה תמונות שונות בגדלים שונים של מסכים.
תמונה רספונסיבית טוענת גדלים שונים של אותה תמונה. כשמשתמשים ב-Art Direction, התמונות נטענות בהתאם למסך.
שימוש בביצוע אמנותי כדי לשפר את ההצגה החזותית. לדוגמה, החיתוכים השונים של התמונות בהדגמה הזו מבטיחים שתמיד תוכלו לראות את מוקד העניין (הפרח) בפירוט, ללא קשר למסך. היתרונות של ניהול קריאייטיב הם אסתטיים בלבד, והוא לא משפיע על הביצועים בהשוואה לתמונות רספונסיביות.
הצגת הקוד
- בכתובת
index.htmlאפשר לראות את הקוד של הנחיות הגרפיקה להדמיה הזו.
איך פועל הקוד
בארט דיירקשן נעשה שימוש בתגים <picture>, <source> ו-<img>.
תמונה
התג <picture> מספק עטיפה לאפס תגי <source> או יותר ולתג <image> אחד.
source
התג <source> מציין משאב מדיה.
הדפדפן משתמש בתג <source> הראשון עם שאילתת מדיה שמחזירה את הערך true. אם אף אחת מבדיקות המדיה לא תואמת, הדפדפן יחזור לטעון את התמונה שצוינה ב-<img>.
.
img
התג <img> מאפשר להפעיל את הקוד הזה בדפדפנים שלא תומכים בתג <picture>.
אם הדפדפן לא תומך בתג <picture>, הוא יטען את התמונה שצוינה בתג <img>.