การออกแบบที่เรียกว่าการตอบสนองหมายความว่าเค้าโครงหน้าเว็บสามารถปรับได้ในอุปกรณ์เทอร์มินัลที่มีความละเอียดหน้าจอต่างกัน อัตราส่วนความหนาแน่นของพิกเซลต่างกัน และความกว้างต่างกัน ความตั้งใจดั้งเดิมของการออกแบบที่ตอบสนองคือการทำให้เว็บไซต์พีซีดั้งเดิมเข้ากันได้กับเทอร์มินัลมือถือ เลย์เอาต์ที่ยืดหยุ่นประเภทนี้ทำให้เลย์เอาต์ของเว็บไซต์มีความสมเหตุสมผลมากขึ้นบนเทอร์มินัลอุปกรณ์ต่างๆ
แม้ว่าการออกแบบแบบตอบสนองจะมีประโยชน์มากมาย แต่ก็มีข้อเสียหลายประการเช่นกัน เนื่องจากพีซีและเทอร์มินัลมือถือเข้าถึงเว็บไซต์เดียวกัน พีซีจึงไม่จำเป็นต้องดูแลเกี่ยวกับขีดจำกัดการรับส่งข้อมูล แต่เทอร์มินัลมือถือไม่สามารถเพิกเฉยได้
เพื่อปรับให้เข้ากับความกว้างของหน้าจอและความหนาแน่นของพิกเซลของเทอร์มินัลรุ่นต่างๆ โดยทั่วไปเราจะใช้วิธีการต่อไปนี้เพื่อตั้งค่าสไตล์ CSS ของรูปภาพ:
<สไตล์> img{ ความกว้างสูงสุด:100%; ความสูง:อัตโนมัติ;ตั้งค่าความกว้างสูงสุดของรูปภาพเป็น 100% เพื่อให้แน่ใจว่ารูปภาพจะไม่เกินความกว้างขององค์ประกอบหลัก หากความกว้างขององค์ประกอบหลักเปลี่ยนแปลง ความกว้างของรูปภาพจะเปลี่ยนความสูงด้วย: auto ช่วยให้มั่นใจได้ว่า ความกว้างของรูปภาพจะเปลี่ยนไป ความสูงของรูปภาพจะถูกปรับขนาดตามอัตราส่วนความกว้างต่อความสูงของตัวเอง
ด้วยวิธีนี้ เมื่อเราเข้าถึงรูปภาพในหน้าเว็บที่ตอบสนองบนอุปกรณ์มือถือ เราจะปรับขนาดความละเอียดของรูปภาพและดาวน์โหลดรูปภาพขนาดใหญ่บนพีซี ซึ่งไม่เพียงแต่จะสิ้นเปลืองการรับส่งข้อมูลและแบนด์วิดท์เท่านั้น แต่ยังทำให้หน้าเว็บช้าลงอีกด้วย ความเร็วในการเปิดส่งผลอย่างมากต่อประสบการณ์ผู้ใช้
โซลูชันใหม่: <รูปภาพ>ในเกาลัดต่อไปนี้ รูปภาพที่แตกต่างกันจะถูกโหลดสำหรับความกว้างของหน้าจอที่แตกต่างกัน minpic.png จะถูกโหลดเมื่อความกว้างของหน้าอยู่ระหว่าง 320px ถึง 640px; middle.png จะถูกโหลดเมื่อความกว้างของหน้ามากกว่า 640px
<ภาพ> <สื่อต้นทาง=(ความกว้างขั้นต่ำ: 320px) และ (ความกว้างสูงสุด: 640px) srcset=img/minpic.png> <สื่อต้นทาง=(ความกว้างขั้นต่ำ: 640px) srcset=img/middle.png> < img src=img/picture.png <สื่อต้นฉบับ=(ความกว้างขั้นต่ำ: 320px) และ (ความกว้างสูงสุด: 640px) และ (การวางแนว: แนวนอน) srcset=img/minpic_landscape.png> <สื่อต้นทาง=(ความกว้างขั้นต่ำ: 320px) และ (ความกว้างสูงสุด: 640px) และ (การวางแนว: แนวตั้ง) srcset=img/ minpic_Portrait.png> <สื่อแหล่งที่มา = (ความกว้างขั้นต่ำ: 640px) และ (การวางแนว: แนวนอน) srcset=img/middlepic_landscape.png> <สื่อต้นทาง=(ความกว้างขั้นต่ำ: 640px) และ (การวางแนว: แนวตั้ง) srcset=img/middlepic_picture.png> <img src=img/picture.png <สื่อต้นทาง =(ความกว้างขั้นต่ำ: 320px) และ (ความกว้างสูงสุด: 640px) srcset=img/minpic.png,img/minpic_retina.png 2x> <สื่อแหล่งที่มา=(ความกว้างขั้นต่ำ: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <ประเภทแหล่งที่มา=รูปภาพ/webp srcset=img/picture.webp> <img src=img/picture.png ขนาด=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>
6. เพิ่มแอตทริบิวต์ขนาดในตัวอย่างต่อไปนี้ โหลดรูปภาพเวอร์ชันที่เกี่ยวข้องเมื่อความกว้างของหน้าต่างมากกว่าหรือเท่ากับ 800px
<สื่อต้นทาง=(ความกว้างขั้นต่ำ: 800px) ขนาด=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w><img src=picture-160 ขนาด .png=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>
ความเข้ากันได้:
ปัจจุบันมีเพียง Chrome, Firefox และ Opera เท่านั้นที่มีความเข้ากันได้ดี ความเข้ากันได้เฉพาะดังแสดงในรูป:
ข้อได้เปรียบ:ดังที่เห็นได้จากโค้ดตัวอย่างด้านบน โดยไม่ต้องแนะนำ js และไลบรารีของบุคคลที่สาม และไม่มีการสืบค้นสื่อใน CSS องค์ประกอบ <picture> สามารถประกาศภาพที่ตอบสนองได้โดยใช้ HTML เท่านั้น
<แหล่งที่มา> องค์ประกอบแท็ก <picture> เองไม่มีแอตทริบิวต์ ส่วนที่วิเศษคือ <picture> ถูกใช้เป็นคอนเทนเนอร์สำหรับ <source>
องค์ประกอบ <source> ซึ่งใช้ในการโหลดมัลติมีเดีย เช่น วิดีโอและเสียง ได้รับการอัปเดตเพื่อโหลดรูปภาพและมีการเพิ่มคุณลักษณะใหม่บางอย่าง:
srcset (จำเป็น)ยอมรับเส้นทางไฟล์ภาพเดียว (เช่น srcset=img/minpic.png)
หรือเป็นเส้นทางภาพที่คั่นด้วยเครื่องหมายจุลภาคซึ่งอธิบายโดยความหนาแน่นของพิกเซล (เช่น: srcset=img/minpic.png, img/minpic_retina.png 2x) คำอธิบาย 1x จะไม่ถูกใช้ตามค่าเริ่มต้น
สื่อ (ไม่จำเป็น)ยอมรับการสืบค้นสื่อที่ผ่านการตรวจสอบแล้ว ดังที่คุณเห็นในตัวเลือก CSS @media (เช่น media=(min-width: 320px))
มันถูกใช้ในตัวอย่างไวยากรณ์ <picture> ก่อนหน้านี้
ขนาด (ไม่จำเป็น)รับคำอธิบายความกว้างเดียว (เช่น ขนาด=100vw) หรือคำอธิบายความกว้างของคิวรีสื่อเดี่ยว (เช่น ขนาด=(ความกว้างขั้นต่ำ: 320px) 100vw)
หรือคำอธิบายความกว้างของคิวรีสื่อที่คั่นด้วยเครื่องหมายจุลภาค (เช่น size=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)) อันสุดท้ายจะถูกใช้เป็นค่าเริ่มต้น
ประเภท (ไม่จำเป็น)ยอมรับประเภท MIME ที่รองรับ (เช่น type=image/webp หรือ type=image/vnd.ms-photo)
เบราว์เซอร์จะโหลดทรัพยากรรูปภาพที่แน่นอนตามคำแนะนำและคุณลักษณะเหล่านี้ ตามลำดับรายการแท็ก เบราว์เซอร์จะใช้องค์ประกอบ <source> แรกที่เหมาะสมและละเว้นแท็ก <source> ที่ตามมา
เพิ่มองค์ประกอบสุดท้าย <img>องค์ประกอบ <img> ถูกใช้ภายใน <picture> เพื่อแสดงเมื่อเบราว์เซอร์ไม่รองรับหรือเมื่อไม่มีแท็กแหล่งที่มาที่ตรงกัน จำเป็นต้องใช้แท็ก <img> ภายใน <picture> หากคุณลืม รูปภาพจะไม่แสดง
ใช้ <img> เพื่อประกาศการแสดงภาพเริ่มต้น วางแท็ก <img> ไว้ที่ส่วนท้ายของ <picture> และเบราว์เซอร์จะเพิกเฉยต่อการประกาศ <source> ก่อนที่จะค้นหาแท็ก <img> แท็กรูปภาพนี้ยังกำหนดให้คุณต้องเขียนแอตทริบิวต์ alt ด้วย
บทความนี้นำมาจากบทความอื่นๆ อีกมากมาย รูปภาพแนะนำทั้งหมดอยู่ที่นี่ ดังนั้นมาลองดูกันได้เลย~
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network