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

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