1.JS的根據(jù)不同屏幕寬度動(dòng)態(tài)設(shè)置html的font-size，使用rem布局。

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

引入flexible.js，不需要在html結(jié)構(gòu)中加入viewport標(biāo)簽。

flexible.js會(huì)在元素上增加一個(gè)data-dpr屬性，以及一個(gè)font-size樣式。JS會(huì)根據(jù)不同的設(shè)備添加不同的data-dpr值，比如說2或者3；同時(shí)會(huì)給html加上對(duì)應(yīng)的font-size的值，比如說75px；以及會(huì)添加viewport標(biāo)簽，JS會(huì)根據(jù)不同的設(shè)備添加不同的縮放比(建議內(nèi)聯(lián)處理，在所有資源加載之前執(zhí)行這個(gè)JS)

例如：設(shè)計(jì)稿是750px寬度，將750px進(jìn)行10等分，則1rem=75px,

如果設(shè)計(jì)稿中量出某塊區(qū)域的margin-top值20px，對(duì)應(yīng)換算成rem為20/75=0.266667rem。

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

b.不引入第三方庫，自寫js動(dòng)態(tài)設(shè)置html的font-size+rem

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

js會(huì)根據(jù)不同設(shè)備的寬度設(shè)置html的font-size，html結(jié)構(gòu)需要加入

屏幕根據(jù)設(shè)計(jì)稿的比例轉(zhuǎn)換對(duì)應(yīng)的rem值，比如：

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

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

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

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

在實(shí)際iphone6設(shè)備375px寬度中，應(yīng)該除以2，所以得到值mragin-top是20/2=10px,

因?yàn)?rem=16px（16*（iphone6設(shè)備寬度/375）+'px'）,所以對(duì)應(yīng)換算成rem為10/16=0.625rem。

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

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

html結(jié)構(gòu)需要加入

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

如果設(shè)計(jì)稿中量出某塊區(qū)域的margin-top值20px，

在實(shí)際iphone6設(shè)備375px寬度中，應(yīng)該除以2，所以得到值mragin-top是20/2=10px。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。