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