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