什麼是 vh，vw?

為 Interview Bit 的第 7 題。

這裡我們會討論 4 個單位元素，vh，vw，vmin，和 vmax。

定義

vh

螢幕可視範圍高度的百分比

vw

螢幕可視範圍寬度百分比

vmin

vh 和 vw 中比較小的值

vmax

vh 和 vw 中比較大的值

什麼是螢幕可視範圍?

就是螢幕的寬度和高度，假設今天螢幕寬 1280px和高720px ，那麼螢幕可視寬度就是 1280px ，螢幕可視最大高度就是 720px。
假設今天螢幕寬 1920px和高1080px，那麼螢幕可視最大寬度就是 1920px ，螢幕可視最大高度就是 1080px。

計算方式

假設現在有寬 1280px和高720px 的 viewport，現在想要計算 50vw，50vh，請問各是多少 px?

1vh = 視窗高度的 1%
50vh = 720px * 50% = 360px

1vw = 視窗寬度的 1%
50vw = 1080px * 50% = 540px

vmin = 取vh 和 vw 中比較小的值 = 360px
vmax = 取vh 和 vw 中比較大的值 = 540px

範例

CodePen
今天我想讓一個 div 永遠占螢幕的上半部分 (50%)，需要怎麼做?

<div></div>

div {
  /*高度永遠占螢幕的一半*/
  height: 50vh; 
  /*寬度永遠占住整個螢幕寬度*/
  width: 100vw;
  background-color: yellow;
}

常見相關問題

How to make a div 100% height of the browser window

參考資料：
CSS單位大全 (px,em,rem,vh,vw,vmin,vmax)
CSS values and units