1.JS的根據不同屏幕寬度動態設置html的font-size，使用rem布局。

a.手淘方案 flexible+rem（參考https://github.com/amfe/article/issues/17）

引入flexible.js，不需要在html結構中加入viewport標簽。

flexible.js會在元素上增加一個data-dpr屬性，以及一個font-size樣式。JS會根據不同的設備添加不同的data-dpr值，比如說2或者3；同時會給html加上對應的font-size的值，比如說75px；以及會添加viewport標簽，JS會根據不同的設備添加不同的縮放比(建議內聯處理，在所有資源加載之前執行這個JS)

例如：設計稿是750px寬度，將750px進行10等分，則1rem=75px,

如果設計稿中量出某塊區域的margin-top值20px，對應換算成rem為20/75=0.266667rem。

css代碼就是margin-top:0.266667rem。
一般用于解決 “數據大屏“ 展示的屏幕適配問題: 解決 “數據大屏“ 展示的屏幕適配問題

b.不引入第三方庫，自寫js動態設置html的font-size+rem

(function (doc, win) { var docEl = doc.documentElement,//根元素html //判斷窗口有沒有orientationchange這個方法，有就賦值給一個變量，沒有就返回resize方法。 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;//把document的fontSize大小設置成跟窗口成一定比例的大小，從而實現響應式效果。　　　　　　docEl.style.fontSize = 16* (clientWidth / 375) + 'px'; }; //alert(docEl) if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三個參數：第一個是事件名稱比如點擊事件onclick，第二個是要執行的函數，第三個是布爾值 doc.addEventListener('DOMContentLoaded', recalc, false)//綁定瀏覽器縮放與加載時間 })(document, window);

js會根據不同設備的寬度設置html的font-size，html結構需要加入

屏幕根據設計稿的比例轉換對應的rem值，比如：

750的設置 = 16*(clientWidth/375)

640的設置 = 20*(clientWidth/320)

320的設置 = 10*(clientWidth/320)

例如：設計稿是750px寬度（基于iphone6 375*2=750 得到的設計稿），如果設計稿中量出某塊區域的margin-top值20px，

在實際iphone6設備375px寬度中，應該除以2，所以得到值mragin-top是20/2=10px,

因為1rem=16px（16*（iphone6設備寬度/375）+'px'）,所以對應換算成rem為10/16=0.625rem。

css代碼中就是margin-top:0.625rem。

2.flex布局，不使用rem，直接使用px。

html結構需要加入

例如：設計稿是750px寬度，設計稿是750px寬度（基于iphone6 375*2=750 得到的設計稿），

如果設計稿中量出某塊區域的margin-top值20px，

在實際iphone6設備375px寬度中，應該除以2，所以得到值mragin-top是20/2=10px。

css代碼中就是margin-top:10px。

總結

以上是生活随笔為你收集整理的移动端H5终端适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。