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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การใช้ vw และ vh ใน CSS

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

by M030 » 30/09/2015 10:06 pm

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

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

Code: Select all

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

Code: Select all

height:70vw;
 

Top