หน่วยพื้นที่แสดงผล: vw vh และ dvh

หน่วยวิวพอร์ตจะอิงตามขนาดของวิวพอร์ตเบราว์เซอร์ (พื้นที่ที่มองเห็นได้ของหน้าต่างเบราว์เซอร์) หน่วยเหล่านี้ช่วยให้เลย์เอาต์และตัวอักษรปรับขนาดตามพื้นที่หน้าจอที่มีอยู่

1vw = 1% ของความกว้างวิวพอร์ต 100vw เติมเต็มความกว้างของวิวพอร์ตทั้งหมด มีประโยชน์สำหรับองค์ประกอบที่ต้องการเต็มความกว้างโดยไม่เกิดความยุ่งยากจากการใช้เปอร์เซ็นต์

1vh = 1% ของความสูงวิวพอร์ต 100vh เติมเต็มความสูงของวิวพอร์ตทั้งหมด นิยมใช้กับส่วนฮีโร่และหน้าต่างโมดัลที่ต้องเต็มหน้าจอ

บนเบราว์เซอร์ของอุปกรณ์เคลื่อนที่ ความสูงของวิวพอร์ตจะเปลี่ยนเมื่อส่วนติดต่อของเบราว์เซอร์ (แถบที่อยู่) แสดงหรือซ่อนระหว่างการเลื่อน 100vh อาจรวมหรือไม่รวมส่วนติดต่อของเบราว์เซอร์อย่างไม่สม่ำเสมอ ทำให้เนื้อหาบางส่วนถูกซ่อน

dvh (ความสูงวิวพอร์ตแบบไดนามิก) จะปรับปรุงค่าแบบไดนามิกให้ตรงกับความสูงที่มองเห็นได้จริงหลังจากส่วนติดต่อของเบราว์เซอร์ปรับเปลี่ยน จึงแก้ปัญหา 100vh บนอุปกรณ์เคลื่อนที่ได้

CSS ยังมี svh (ความสูงวิวพอร์ตขนาดเล็ก — ไม่รวมส่วนติดต่อของเบราว์เซอร์เสมอ) และ lvh (ความสูงวิวพอร์ตขนาดใหญ่ — ราวกับว่าส่วนติดต่อถูกซ่อน) ซึ่งช่วยให้ควบคุมพฤติกรรมของวิวพอร์ตบนอุปกรณ์เคลื่อนที่ได้อย่างละเอียด

การใช้ vw กับขนาดแบบอักษรจะทำให้ตัวอักษรปรับขนาดตามหน้าจอ:

100vw จะรวมความกว้างของแถบเลื่อนบนคอมพิวเตอร์ตั้งโต๊ะด้วย ซึ่งทำให้เกิดเนื้อหาล้นในแนวนอนได้หากใช้อย่างไม่ระมัดระวัง ควรใช้ width: 100% กับองค์ประกอบบล็อก และสงวน vw ไว้สำหรับกรณีเฉพาะ

1vmin = 1% ของมิติวิวพอร์ตที่เล็กกว่า (ความกว้างหรือความสูง) 1vmax = 1% ของมิติที่ใหญ่กว่า มีประโยชน์สำหรับคอนเทนเนอร์สี่เหลี่ยมจัตุรัสที่ปรับตามการเปลี่ยนแนวหน้าจอ

เช่นเดียวกับรูปแบบความสูง CSS มี svw, lvw และ dvw สำหรับความกว้าง รูปแบบไดนามิก (dvw, dvh) มีประโยชน์มากที่สุดบนอุปกรณ์เคลื่อนที่

รูปแบบการใช้หน่วยวิวพอร์ตที่พบบ่อย:

• min-height: 100dvh — ส่วนเต็มหน้าจอที่ปลอดภัยบนอุปกรณ์เคลื่อนที่
• height: 100svh — แผงส่วนติดต่อผู้ใช้แบบคงที่
• font-size: clamp(1rem, 2.5vw, 2rem) — หัวข้อที่ปรับขนาดลื่นไหล
• width: min(800px, 90vw) — คอนเทนเนอร์ที่มีความกว้างปลอดภัย

vw และ vh มีค่าเท่ากับ 1% ของความกว้างหรือความสูงวิวพอร์ต บนอุปกรณ์เคลื่อนที่ vh ไม่น่าเชื่อถือเนื่องจากส่วนติดต่อของเบราว์เซอร์ ให้ใช้ dvh สำหรับเลย์เอาต์เต็มหน้าจอแบบไดนามิกที่แม่นยำบนอุปกรณ์เคลื่อนที่ ส่วน vmin และ vmax จะตอบสนองต่อมิติวิวพอร์ตที่เล็กกว่าหรือใหญ่กว่า