มารู้จัก Viewport units (vw, vh, vmin, vmax)
เริ่มต้นเราต้องมาพูดถึง viewport ก่อนว่ามันคืออะไร
ซึ่ง viewport ก็คือ ขนาดการแสดงผลของหน้าจอที่ browser ได้ทำการ render website นั้นๆ งั้นบางครั้งถ้าเราอยากจะกำหนดขนาดของ element อะไรก็ตาม ตัวอย่างเช่น sidebar เราอาจจะต้องกำหนด width เป็น percentages
.sidebar { width: 25% }ทีนี้ถ้าเราจะกำหนดความสูงให้เท่ากับ viewport จะต้องทำอย่างไร
html, body { height: 100%; }.sidebar {
width: 100%;
height: 100%;
}
ทำไมเราถึงต้องกำหนดความสูงให้กับ html และ body นั่นก็เพราะว่าการกำหนดความสูงให้กับ sidebar เป็น percentages นั้นมันมีผลเกี่ยวข้องกับ parent properties (html, body) เมื่อเรากำหนดให้ความสูงของ child element เป็นตัวกำหนดขวามสูงของ parent element มันจะไม่รู้ว่าต้องสูงเท่าไหร่ เพราะงั้นความสูงที่กำหนดเข้าไปก็จะถูกยกเลิกไป
Viewport-percentage lengths
ทุกวันนี้สิ่งที่ front-end dev. ต้องเจออยู่เป็นประจำคงหนีไม่พ้น website ที่เป็น One-pagers, full-width grid, typography และอื่นๆ อีกมากมายที่มีผลเกี่ยวข้องกับขนาดของ viewport
ดั้งนั้นหน่วยวัดใหม่นี้จึงเกิดขึ้นเพื่อให้ชีวิตเราๆ ดีขึ้นนั้นเอง
- vw: 1/100th ของความกว้างของ viewport
- vh: 1/100th ของความสูงของ viewport
- vmin: 1/100th ของขนาด viewport ที่เล็กกว่า
- vmax: 1/100th ของขนาด viewport ที่ใหญ่กว่า
หมายเหตุ IE9 ต้องใช้ vm แทน vmin และ vmax ไม่สามารถใช้งานได้
