ลองใช้การสาธิตนี้
หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
โหลดแอปซ้ำในหน้าต่างเบราว์เซอร์ที่มีขนาดต่างกันเพื่อดูเบราว์เซอร์โหลดรูปภาพที่ต่างกัน และใช้เลย์เอาต์ที่ต่างกันในเบราว์เซอร์ขนาดต่างๆ
ดูโค้ด
- ชำระเงิน
index.html
สำหรับรหัสที่ใช้สร้างนี้:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
เกิดอะไรขึ้น
ค่าของแอตทริบิวต์ sizes
จะกำหนดว่าความกว้างของการแสดงรูปภาพจะเป็น "100% ของความกว้างของวิวพอร์ต" ในวิวพอร์ตกว้างถึง 480 พิกเซล "50% ของความกว้างวิวพอร์ต" บนหน้าจอที่มีความกว้าง 481–1024 พิกเซล และ 800 พิกเซลบนหน้าจอที่กว้างกว่า 1024 พิกเซล ความกว้างเหล่านี้ตรงกับความกว้างที่ระบุใน CSS
ความสามารถในการระบุความกว้างของช่องหลายช่องจะรองรับเลย์เอาต์หน้าเว็บที่ใช้การจัดรูปแบบต่างกัน (ซึ่งก็คือความกว้างของรูปภาพ) สำหรับวิวพอร์ตขนาดต่างๆ
วิธีระบุความกว้างของช่องหลายช่อง
- ใช้รายการที่คั่นด้วยเครื่องหมายจุลภาคเพื่อระบุความกว้างของช่องหลายช่อง แต่ละรายการในลิสต์
ยกเว้นรายการสุดท้ายจะประกอบด้วยเงื่อนไขของสื่อ (เช่น
max-width
หรือmin-width
) และความกว้างของช่อง - รายการสุดท้ายในรายการนี้คือความกว้างของช่องเริ่มต้น โดยตัวเลือกนี้จะเป็นค่าเริ่มต้น คุณจึงไม่จำเป็นต้องระบุเงื่อนไขของสื่อ
- คุณจะแสดงความกว้างของช่องได้มากเท่าที่ต้องการ แต่จำนวนรูปภาพที่แสดงใน
srcset
จะไม่คำนึงถึงจำนวนรูปภาพ สามารถระบุความกว้างของช่องได้โดยใช้หน่วยที่หลากหลาย ความกว้างที่ใช้ได้ทั้งหมดมีดังนี้
100px
33vw
20em
calc(50vw-10px)
ต่อไปนี้เป็นความกว้างที่ไม่ถูกต้อง:
25%
(เปอร์เซ็นต์ใช้กับแอตทริบิวต์ขนาดไม่ได้)