前言

作為一個小前端，經常要和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。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。