การใช้ vw และ vh ใน CSS

[M030]

หน่วย vw, vh, vmin อาจจะไม่ค่อยคุ้นหูซักเท่าไหร่ แต่ความสามารถของมันคงตอบสนองความต้องการของใครหลายๆคนได้เลยค่ะ

vm
แต่ก่อนถ้าเราต้องการให้บล็อกมีความสูงเต็มจอ หรือพอดีกับหน้าจอเรามักจะใช้ JavaScriptในการคำนวนขนาดของหน้าจอ และกำหนดค่าความสูงของ CSSซึ่งอาจจะยุ่งยาไปซักนิด แต่ตอนนี้เราสามารถทำมันได้ง่ายขึ้นด้วย CSSเพียง 1 บรรทัดโดยการใช้หน่าย vh(viewport-height) ในการกำหนดความสูงของหน้าจอค่ะ วิธีการก็ง่ายแสนง่ายเพียงคุณกำหนดค่าที่คุณต้องการตามโค้ดด้านล่างเลยค่ะ

โค้ด: เลือกทั้งหมด

height:100vh;
 

vw
หน่วย vw (viewport width) เป็นการกำหนดความกว้างให้กับขนาดของหน้าจอ โดยคำสั่ง CSSเพียง 1 บรรทัด ส่วนใหญ่เราจะใช้คู่กันกับ vh ค่ะ

โค้ด: เลือกทั้งหมด

height:70vw;