หน่วย vw และ vh ใน CSS

หน่วย vw และ vh ช่วยให้กำหนด ขนาดเทียบกับพื้นที่การมองเห็นของหน้าต่าง เบราว์เซอร์ได้ ลองดูตัวอย่างกัน

สมมติว่าเรามี div หนึ่ง:

html<div></div>

ลองกำหนดความกว้างให้มันเป็นครึ่งหนึ่งของความกว้าง พื้นที่การมองเห็น และความสูงเป็นครึ่งหนึ่งของความสูง พื้นที่การมองเห็น:

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

มาดูกันว่าเราได้อะไร: