ลองใช้เดโมนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- โหลดแอปซ้ำโดยใช้ขนาดเบราว์เซอร์อื่น สังเกตว่ารูปภาพมีความแตกต่างกันเพียงใด ทั้งขนาด การครอบตัด และสัดส่วนภาพ
เกิดอะไรขึ้น
การกำหนดแนวทางศิลป์จะแสดงรูปภาพที่แตกต่างกันในขนาดการแสดงผลที่แตกต่างกัน
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะโหลดรูปภาพเดียวกันในขนาดต่างๆ การจัดอาร์ตเวิร์กจะดำเนินการต่ออีกขั้นและโหลดรูปภาพที่แตกต่างกันโดยสิ้นเชิง ทั้งนี้ขึ้นอยู่กับจอแสดงผล
ใช้ผู้กำกับศิลป์เพื่อปรับปรุงการนำเสนอด้วยภาพ เช่น การครอบตัดรูปภาพที่แตกต่างกันในเดโมนี้ช่วยให้มั่นใจได้ว่าจุดที่น่าสนใจ (ดอกไม้) จะแสดงอย่างละเอียดเสมอ ไม่ว่าจะแสดงบนจอแสดงผลใดก็ตาม ประโยชน์ของการจัดอาร์ตเวิร์กคือความสวยงามล้วนๆ ไม่ได้ให้ประโยชน์ด้านประสิทธิภาพเหนือกว่ารูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา
ดูโค้ด
- ดู
index.htmlเพื่อดูโค้ดการกำกับศิลป์สำหรับเดโมนี้
วิธีการทํางานของรหัส
กำกับศิลป์ใช้แท็ก <picture>, <source> และ <img>
picture
แท็ก <picture> มีตัวห่อสำหรับแท็ก <source> อย่างน้อย 1 แท็กและแท็ก <image> 1 แท็ก
source
แท็ก <source> จะระบุทรัพยากรสื่อ
เบราว์เซอร์จะใช้แท็ก <source> รายการแรกที่มี Media Query ที่แสดงผลเป็น "จริง" หากไม่มี Media Query ที่ตรงกัน เบราว์เซอร์จะกลับไปโหลดรูปภาพที่ระบุโดย <img>
แท็กปิ
img
แท็ก <img> ทําให้โค้ดนี้ทํางานในเบราว์เซอร์ที่ไม่รองรับแท็ก <picture>
หากเบราว์เซอร์ไม่รองรับแท็ก <picture> ระบบจะโหลดรูปภาพที่ระบุโดยแท็ก <img>