ลองใช้การสาธิตนี้
หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
โหลดแอปซ้ำในหน้าต่างเบราว์เซอร์ที่มีขนาดต่างกันเพื่อดูการโหลดเบราว์เซอร์ รูปภาพต่างกันและใช้เลย์เอาต์ที่ต่างกันตามเบราว์เซอร์ขนาดต่างๆ
ดูโค้ด
- ชำระเงิน
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%(ใช้เปอร์เซ็นต์กับแอตทริบิวต์ขนาดไม่ได้)