เริ่มต้น

เริ่มต้น

เริ่มต้น

เริ่มต้น

เริ่มต้น

เริ่มต้น

เริ่มต้นเราต้องมาพูดถึง viewport ก่อนว่ามันคืออะไร

ซึ่ง ​viewport ก็คือ ขนาดการแสดงผลของหน้าจอที่ browser ได้ทำการ render website นั้นๆ งั้นบางครั้งถ้าเราอยากจะกำหนดขนาดของ element อะไรก็ตาม ตัวอย่างเช่น sidebar เราอาจจะต้องกำหนด width เป็น percentages

ทำไมเราถึงต้องกำหนดความสูงให้กับ html และ body นั่นก็เพราะว่าการกำหนดความสูงให้กับ sidebar เป็น percentages นั้นมันมีผลเกี่ยวข้องกับ parent properties (html, body) เมื่อเรากำหนดให้ความสูงของ child element เป็นตัวกำหนดขวามสูงของ parent element มันจะไม่รู้ว่าต้องสูงเท่าไหร่ เพราะงั้นความสูงที่กำหนดเข้าไปก็จะถูกยกเลิกไป

ทดสอบหัวข้อ

ทุกวันนี้สิ่งที่ 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 ไม่สามารถใช้งานได้