前端開發的h5介面不經適配在手機端顯示會出現佈局變化的問題。需要在編寫的時候注意如下幾點，以適應適配。

在head標籤內新增

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>

對於頁面內顯示的文字，可以使用兩種方式：

var deviceWidth = document.documentElement.clientWidth;

       if (deviceWidth >1080) {deviceWidth=1080;}
       document.documentElement.style.fontSize =deviceWidth/25+"px";
 

這種方式適合於文字、段落較多的頁面。可以通過這種方式來設定某元素的整體大小，而且用px表示也較為直觀。

第二種方式是使用rem來設定文字大小。rem和em是密不可分的。1em等於16px，可以通過程式碼來改變預設值。

font-size:62.5%;//設定預設10px；10/16*100%

前端小白一枚，歡迎各路大神指正。