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

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

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

<div></div>

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

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

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

มี div อยู่หนึ่งอัน กำหนดระยะห่างด้านบนให้มัน เท่ากับ 30% ของความสูงพื้นที่การมองเห็น

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