需求：我們項目的需求是

一、vh vw

vw和vh是相對於視口（viewport）的寬度和高度。由於現在移動設備的屏幕尺寸之差別，如果仍然根據屏幕的物理分辨率來設計網頁，效果很難統一，因此html5和css3引入視口的概念來代替顯示器的物理尺寸。通過在meta標簽上的設置，視口的長寬可以跟設備的物理分辨率相等，也可以不相等（以便手機上可以實現用兩個手指來放大會縮小頁面），可根據需要靈活掌握。在PC端中，視口的長寬則是跟瀏覽器窗口的物理分辨率相等的。

　　 1vw等於視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度；

　　1vh等於視口高度（viewport height）的百分之一。

　　（字體也可以設置）

二、應用

解決父級無高 ,設置自身固定高值又不能兼容所有設備，設置百分比無效，此時用vw設置可完美解決，兼容各種設備。

CSS3中的vh、vw及其應用場景