Viewport units ใน CSS

Viewport units ใน CSS เป็นหน่วยของการวัดขนาดที่ใช้ในการกำหนดความกว้างและความสูงขององค์ประกอบต่างๆในเว็บไซต์หรือแอปพลิเคชันเว็บ โดยมีความพิเศษที่ค่าของหน่วยจะเปลี่ยนแปลงขึ้นอยู่กับขนาดของ viewport ซึ่งเป็นพื้นที่การแสดงผลของเนื้อหาบนหน้าจอของผู้ใช้.

Viewport units มีอยู่ 4 ประเภท:

vw (viewport width) – แทนส่วนแบ่งของความกว้างของ viewport ในหน่วยพิกเซล 1vw เท่ากับ 1/100 ของความกว้างของ viewport
vh (viewport height) – แทนส่วนแบ่งของความสูงของ viewport ในหน่วยพิกเซล 1vh เท่ากับ 1/100 ของความสูงของ viewport
vmin (viewport minimum) – แทนส่วนแบ่งที่น้อยที่สุดระหว่างความกว้างและความสูงของ viewport ในหน่วยพิกเซล 1vmin เท่ากับ 1/100 ของความกว้างหรือความสูงที่มีค่าน้อยกว่า
vmax (viewport maximum) – แทนส่วนแบ่งที่มากที่สุดระหว่างความกว้างและความสูงของ viewport ในหน่วยพิกเซล 1vmax เท่ากับ 1/100 ของความกว้างหรือความสูงที่มีค่ามากกว่า
Viewport units ใช้ในการกำหนดขนาดขององค์ประกอบต่างๆ เช่น กว้างของส่วนหัว (header) ให้เท่ากับ 50vw หมายความว่าความกว้างของส่วนหัวจะเท่ากับครึ่งหนึ่งของความกว้างของ viewport หรือใช้กำหนดความสูงของส่วนเนื้อหาให้เท่ากับ 75vh เพื่อให้ส่วนเนื้อหามีความสูงที่สอดคล้องกับความสูงของ viewport ในสัดส่วน 75% และอื่นๆ อีกมากมาย