ลองใช้เดโมนี้
หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
โหลดแอปซ้ำในหน้าต่างเบราว์เซอร์ขนาดต่างๆ เพื่อดูเบราว์เซอร์โหลดรูปภาพที่แตกต่างกันและใช้เลย์เอาต์ที่แตกต่างกันในขนาดเบราว์เซอร์ที่แตกต่างกัน
ดูโค้ด
- ดูโค้ดที่ทำให้ฟีเจอร์นี้ทำงานได้ที่
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จะไม่มีผล คุณระบุความกว้างของช่องได้โดยใช้หน่วยต่างๆ ความกว้างที่ถูกต้องทั้งหมดมีดังนี้
100px33vw20emcalc(50vw-10px)
ความกว้างต่อไปนี้ไม่ถูกต้อง
25%(ใช้เปอร์เซ็นต์กับแอตทริบิวต์ sizes ไม่ได้)