โดย M030 » 30/09/2015 10:06 pm
หน่วย vw, vh, vmin อาจจะไม่ค่อยคุ้นหูซักเท่าไหร่ แต่ความสามารถของมันคงตอบสนองความต้องการของใครหลายๆคนได้เลยค่ะ
vm
แต่ก่อนถ้าเราต้องการให้บล็อกมีความสูงเต็มจอ หรือพอดีกับหน้าจอเรามักจะใช้
JavaScriptในการคำนวนขนาดของหน้าจอ และกำหนดค่าความสูงของ
CSSซึ่งอาจจะยุ่งยาไปซักนิด แต่ตอนนี้เราสามารถทำมันได้ง่ายขึ้นด้วย
CSSเพียง 1 บรรทัดโดยการใช้หน่าย vh(viewport-height) ในการกำหนดความสูงของหน้าจอค่ะ วิธีการก็ง่ายแสนง่ายเพียงคุณกำหนดค่าที่คุณต้องการตามโค้ดด้านล่างเลยค่ะ
vw
หน่วย vw (viewport width) เป็นการกำหนดความกว้างให้กับขนาดของหน้าจอ โดยคำสั่ง
CSSเพียง 1 บรรทัด ส่วนใหญ่เราจะใช้คู่กันกับ vh ค่ะ
หน่วย vw, vh, vmin อาจจะไม่ค่อยคุ้นหูซักเท่าไหร่ แต่ความสามารถของมันคงตอบสนองความต้องการของใครหลายๆคนได้เลยค่ะ
[size=150][color=#004040][b]vm[/b][/color][/size]
แต่ก่อนถ้าเราต้องการให้บล็อกมีความสูงเต็มจอ หรือพอดีกับหน้าจอเรามักจะใช้ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]JavaScript[/url]ในการคำนวนขนาดของหน้าจอ และกำหนดค่าความสูงของ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url]ซึ่งอาจจะยุ่งยาไปซักนิด แต่ตอนนี้เราสามารถทำมันได้ง่ายขึ้นด้วย [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url]เพียง 1 บรรทัดโดยการใช้หน่าย vh(viewport-height) ในการกำหนดความสูงของหน้าจอค่ะ วิธีการก็ง่ายแสนง่ายเพียงคุณกำหนดค่าที่คุณต้องการตามโค้ดด้านล่างเลยค่ะ
[code=php]
height:100vh;
[/code]
[b][color=#004040][size=150]vw[/size][/color][/b]
หน่วย vw (viewport width) เป็นการกำหนดความกว้างให้กับขนาดของหน้าจอ โดยคำสั่ง [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url]เพียง 1 บรรทัด ส่วนใหญ่เราจะใช้คู่กันกับ vh ค่ะ
[code=php]
height:70vw;
[/code]