1.什麼是移動端適配

在製作webapp時，一個很關鍵的問題就是適配各種機型不同螢幕的大小，讓每種機型上的佈局看起來都儘量一樣。
也就是說用同一套程式碼在不同解析度的手機上跑時，頁面元素間的間距、留白，以及圖片大小會隨著變化，在比例上跟設計稿一致。
沒有實現適配時，不同螢幕大小中的高度、寬度、字型大小是一樣的，如下圖所示：

2.常見的移動端適配方法

適配方案有很多種，常見的方法有以下幾種：

• 固定高度，寬度百分比：這種方法只適合簡單、要求不高的webApp，幾乎達不到大型專案的要求，屬於過時的方法。
• Media Query（媒體查詢）：現在比較主流的適配方案，比如常用的樣式框架Bootstrap就是用這種方法，它能完成大部分專案需求，但是編寫過於複雜。
• flex佈局：主流的佈局方式，不僅適用於移動Web，網頁上也表現良好，這也是現在工作中用的最多的佈局方式，因此我們的專案儘量採用flex+rem的方式進行佈局和完成移動端的適配。
  
  

3.rem適配原理

rem是相對長度單位，可以做到一樣的取值，在不同尺寸的螢幕上的大小按比例縮放。
**rem的定義：**rem（font size of the root element）是相對於根元素（即html元素）font-size計算值的倍數。
例如html標籤設定font-size:16px，同時div設定width:1.2rem。那麼這個div的寬度就是1.2rem=16px*1.2=19.2px。
因此這種方法的適配原理

4.JS控制適配螢幕

明白了REM的原理後，我們就可以使用這個特點來進行適應佈局了，這也是現在比較主流的移動端web適配方案。

//獲得螢幕大小
let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;  //瀏覽器相容
console.log("螢幕寬度："+htmlwidth) //iphone5:320 iphone6:375
 


//獲得html DOM元素
let htmlDom = document.getElementsByTagName('html')[0];

//給DOM元素設定樣式
htmlDom.style.fontSize = htmlwidth/20 + 'px';  
//以iphone5為基礎 iphone5預設字型大小為16px 320/16=20 即1rem字型大小是螢幕寬度的1/20

進行螢幕適配後，使用Rem進行佈局，就可以實現移動端螢幕適配的效果，適配的效果如圖所示：

更多內容，歡迎關注微信公眾號“讓知識成為資產”。