點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
這幾個單位，看著並不像PX，em，rem那樣熟悉，但它們確實也是存在，也是有其使用場景。下面從概念開始來了解一下它們是怎麼用的，幹嘛用的.....逐一解開這些疑惑。
一、概念很能說明問題
【vw】
viewpoint width，視窗寬度，1vw=視窗寬度的1%
【vh】
viewpoint height，視窗高度，1vh=視窗高度的1%
【vmin/vmax】
vw和vh中較小（較大）的那個。
通過概念，相信大家對這幾個單位有了一些認識。那麼這幾個單位到底有多大的發揮空間了？來了解一下它們的兼容性。
二、兼容性如何
點擊看一下，發現兼容性在chrome20+就以支持vw/vh。從49+才開始支持vmin/vmax。移動端safari從10.3+才開始支持vmin/vmax。所以，接下來的例子，沒必要關注IE上的運行了。IE拜拜。
三、回到概念看視窗
假如設置20vw，即表示視窗的百分20的寬度大小。那什麼是視窗呢？也就是他的相對參考系具體是指的是誰……
來看這幾個值所代表的意義：
【window.innerWidth】
表示瀏覽器內部寬度大小。
【window.outerWidth】
表示整個瀏覽器的寬度大小。
【screen.width】
表示顯示器的寬度大小
通過一個例子來看一下視窗到底是哪個值？
當我設置width為50vm的時候，發現它的寬度大小剛剛是window.innerWidth的一半。
所以所謂的視窗就是指瀏覽器內部寬度。
小節一下
有了上面這些對單位的認識，那麼接下來就只剩下一個問題了，就是這幾個單位到底有哪些使用場景呢？明天早上我會單獨搞一篇來分享一下……
分享到:
閱讀更多 小鄭搞碼事 的文章
