使用viewport中的vm來適配移動端頁面

前言

做爲一個小前端，常常要和H5打交道，這就面臨着不一樣終端的適配問題。
Flexible方案經過Hack手段來根據設備的dpr值相應改變<meta>標籤中viewport的值，給我更貼切的體會就是經過js腳本根據設備的dpr和設計圖的寬度來計算出html的font-size值，而後就運用rem單位開發能夠等比例縮放的H5頁面。
可是！Flexible已經完成了他自身的歷史使命，咱們能夠放下Flexible，擁抱新的變化。

作到適配要解決的問題

在移動端佈局，咱們須要面對兩個最爲重要的問題：

• 各終端下的適配問題
• Retina屏的細節處理
  不一樣的終端，咱們面對的屏幕分辨率、DPR、1px、2x圖等一系列的問題。那麼這個佈局方案也是針對性的解決這些問題，只不過解決這些問題再也不是使用Hack手段來處理，而是直接使用原生的CSS技術來處理的。

適配終端

之前的Flexible方案是經過JavaScript來模擬vw的特性，那麼到今天爲止，vw已經獲得了衆多瀏覽器的支持，也就是說，能夠直接考慮將vw單位運用於咱們的適配佈局中。

vw是基於Viewport視窗的長度單位，這裏的視窗（Viewport）指的就是瀏覽器可視化的區域，而這個可視區域是window.innerWidth/window.innerHeight的大小。用下圖簡單的來示意一下：

藍色區域就是 window.innerWidth 和 window.innerHeight

在CSS Values and Units Module Level 3中和Viewport相關的單位有四個，分別爲vw、vh、vmin和vmax。

• vw：是Viewport's width的簡寫,1vw等於window.innerWidth的1%
• vh：和vw相似，是Viewport's height的簡寫，1vh等於window.innerHeihgt的1%
• vmin：vmin的值是當前vw和vh中較小的值
• vmax：vmax的值是當前vw和vh中較大的值

若是設計稿用750px寬度的，100vw = 750px，即1vw = 7.5px。那麼咱們能夠根據設計圖上的px值直接轉換成對應的vw值。若是不想本身計算，咱們可使用PostCSS的插件postcss-px-to-viewport，讓咱們能夠直接在代碼中寫px。

具體的PostCSS咱們放到另一篇文章吧，畢竟我還不會~

參考資料

大漠--再聊移動端頁面的適配