介紹視窗(Viewport)單位
視窗(Viewport)是你的瀏覽器實際顯示內容的區域——換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,vh,vmin和vmax。它們都代表了瀏覽器（視窗(Viewport)）尺寸的比例和窗口大小調整產生的規模改變。
比方說我們有一個1000px（寬）和800px（高）的視窗(Viewport)
vw——代表視窗(Viewport)的寬度為1%，在我們的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是當前vw和vh中較小的值。在我們的例子里因為是橫向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一個可以使用像素值的地方使用它們，比如width,height,margin,font-size等等。它們將通過窗口大小的調整或旋轉設備的瀏覽器來重新計算這些值。
占用頁面的整個高度
每一個前端開發人員都致力于這件事。你的第一直覺是這樣做：
然而，除非我們為html和body添加100%的高度，但只是這樣還是不行的，因為這樣的代碼并不優雅而且很有可能會破壞你的設計的其余部分。使用vh就變得相當容易了，只需要為高度設置100vh，那它將永遠都是你窗口的高度。
視口寬度大小
vw是CSS3新加入的一個使用視口寬度來計算字體大小的單位。這樣可以允許更多的響應字體大小。
盡管這似乎是為響應式設計的一個很有用的單位，但我個人不是它的粉絲。因為它并不能在字體大小上給我更多的控制權，他總是顯示的過大或過小。
我的方法
在我做這項研究之前，我一直使用像素來設置我的字體大小。這是因為現在的大多數瀏覽器允許用戶在字體太小的情況下自行放大頁面，所以使用像素并沒有什么問題。
但是，我發現這種方式在很大程度上限制了擴展能力。雖然我的字體在中小屏幕上看起來不錯，但他應該在大屏幕上有更好的優化。即便用戶有放大的選項，這也不應該是我們希望他們來做的事情。
因此我使用rem設置的解決方案是(使用像素作為備用)。
新聞熱點
疑難解答
