移動端H5終端適配方案

時間 2019-11-30

標籤移動 h5 終端適配方案欄目無線简体版

原文原文鏈接

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

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

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

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

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

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

　　　　 css代碼就是margin-top:0.266667rem。瀏覽器

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

        (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結構須要加入函數

　　<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">佈局

　　屏幕根據設計稿的比例轉換對應的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結構須要加入<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">