การระบุความกว้างของช่องหลายช่อง

Katie Hempenius

ลองใช้การสาธิตนี้

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

• โหลดแอปซ้ำในหน้าต่างเบราว์เซอร์ที่มีขนาดต่างกันเพื่อดูการโหลดเบราว์เซอร์ รูปภาพต่างกันและใช้เลย์เอาต์ที่ต่างกันตามเบราว์เซอร์ขนาดต่างๆ

ดูโค้ด

• ชำระเงิน 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% (ใช้เปอร์เซ็นต์กับแอตทริบิวต์ขนาดไม่ได้)