css的vh與vw是目前使用上基於Windows(窗口大小)的寬與高對應的百分比單位，比較於直接使用%的記算方式不同，對於rwd是個很方便的單位，而相容性來說連最頭疼的ie也能到8的版本。

vh與vw和%的比較：

  • %會受到父層的影響，如果父層沒有%單位來繼承的話，子層完全沒有作用。
  • vh與vw的父層就是Windows(窗口大小)，基於Windows(窗口大小)直接將單位換算成子層的單位。vh代表的是view height，也就是螢幕可視範圍高度的百分比；vw表示的是view width，也就是螢幕可是範圍寬度的百分比。
  • font-size也可以使用此單位，字可跟著放大縮小
  • 其他：vmin「長或寬較小的那個的百分比」，vmax「長或寬較大的那個的百分比」。

以視窗的度將子容器處理成等高達到高度滿版面

See the Pen test section{height: 100vh;}-用一行 CSS 做出全螢幕區塊 (Make full screen sections with 1 line of CSS) by Jimmy_Wu (@Jimmy_Wu) on CodePen.


js bin展示開新視窗

  1. body; height: 100vh; 比較 body; height: 100%; 在子元素撐開超過100%時，body; height: 100%;不會自動將區塊加到子元素的高度，而是固定於原本的h:100%
  2. height: inherit; 規定應該從父元素繼承 height 屬性的值

div區塊使用vh與vw的正方形

See the Pen div區塊使用vh與vw的正方形 by Jimmy_Wu (@Jimmy_Wu) on CodePen.


js bin展示開新視窗

將子層的容器高度和寬度以vw為單位，同樣指定為20vw就可以為可等比縮放的正方形，

資料源：
[筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同
Viewport units: vw, vh, vmin, vmax