可點選QR code
文章專區
網頁設計相關文章
CSS3新單位－－vh vw
想要讓你的圖片隨著螢幕放大縮小嗎？想要讓你的圖片放滿版嗎？不妨來試試CSS3的新單位vh、vw吧！
vh、vw在使用上與百分比%很相似，vh代表view height，指的是螢幕可視範圍高度的百分比，而vw則代表view width，是指螢幕可視範圍寬度的百分比。
vmin：寬度或高度較小值的百分比
vmax：寬度或高度較大值的百分比
像素px、百分比%、vw vh的比較
像素px：最基本易懂的單位，不會跟著視窗縮放尺寸。
例 : width:200px; height:100px;
.gif)
百分比%：由於沒有任何內容物，所以跟vh vw不同，即使設定了數值也不會顯示，除了這點以外，百分比是以父元素為基準做百分比縮放，而vh vw則是以裝置(螢幕視窗)大小為基準。
vh vw : 會隨著網頁縮放而改變尺寸。比如說設定一個div為width:50vw;height:30vh（為了方便顯示，另設定一個div為width:100vw;height:100vh來包整塊可視範圍）。
意思就是說這塊div會占可視範圍寬度的50%、高度的30%
這個新單位會隨著網頁縮放而改變，因此在RWD網頁設計的應用上是相當實用。
