摘要：移動端頁面開發適配布局原理什么是適配，為什么要適配我們拿到的設計圖一般是以，，分辨率為基準設計的，而現在的手機終端各式各樣，分辨率不同，邏輯像素不同，視口不同，所以為了讓我們的頁面在每個設備上都可以良好的展示，那么就需要為這些設備做統一的處

我們拿到的設計圖一般是以640，750，1080分辨率為基準設計的，而現在的手機終端各式各樣，分辨率不同，邏輯像素不同 ，視口不同，所以為了讓我們的頁面在每個設備上都可以良好的展示，那么就需要為這些設備做統一的處理，這個過程就稱為移動端適配。

物理像素(physical pixel)

一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，可以理解為我們平時說的分辨率。

設備獨立像素(density-independent pixel)

設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關系統轉換為物理像素，在這里可以理解為我們說的視覺視口的大??；

所以說，物理像素和設備獨立像素之間存在著一定的對應關系，這就是接下來要說的設備像素比。

設備像素比(device pixel ratio)

設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到：
設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向

設備像素比也是設備生產的時候設置好的，在javascript中，可以通window.devicePixelRatio獲取到當前設備的dpr。

pc端視口指瀏覽器窗口內的內容區域，不包含工具條，滾動條.

移動瀏覽器中視口分為幾種情況:

中content所設置的視口，稱為布局視口，最大值由瀏覽器廠商規定 ,可以document.documentElement.clientWidth獲取其寬度.

而我們看到的瀏覽器的窗口，網頁區域的大小，稱為視覺視口，用css像素表示（設備邏輯像素）

rem是css3 的一個長度單位 ，相對文檔跟元素 html；比如設置html font-size=100px;那么1rem=100px;之后的所有元素都可以用這個基準值來設置大??；

固定高度，寬度自適應（百分比，em）

使用 rem布局

1) 將布局適口設置為視覺視口，不進行縮放，即理想視口。

這里if(deviceWidth > 640) deviceWidth = 640;  是因為當deviceWidth大于640時物理分辨率已經大于1280（取決于dpr），應該去訪問pc的網站；
淘寶的做法：
原理
1)  通過dpr設置縮放比，實現布局視口大小，
var scale = 1 / devicePixelRatio;  
 document.querySelector("meta[name="viewport"]").setAttribute("content","initial-scale="+ scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

2)   動態計算html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’；

這里的意思是，clientWidth / 10 得到是布局視口下的rem基準值（以iphone6為例 1rem＝75px），那么設計稿正好也是 750，所以對應的關系  clientWidth / 10＝＝設計稿的尺寸/x,  那么x=設計稿的尺寸/rem基準值。
如果是iphone6 plus  rem基準值等于clientWidth / 10 等于124.2，那么x＝750/124.2。

關于具體的實現 淘寶提供了一個開源的方案lib-flexible：https://github.com/amfe/lib-f...；
具體邏輯 ：
1）判斷head中是否設置了viewport，如果有設置，按照已有viewport 設置縮放比；
if (metaEl) {
        console.warn("將根據已有的meta標簽來設置縮放比例");
        var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    }

2）如果沒有設置meta viewport，判斷是否設置dpr，如果有，通過dpr計算縮放scale。
        var content = flexibleEl.getAttribute("content");
        if (content) {
            var initialDpr = content.match(/initial-dpr=([d.]+)/);
            var maximumDpr = content.match(/maximum-dpr=([d.]+)/);//maximum 設置最大值，與initial的值比較，取最小值；
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }

3）如果 dpr &scale都沒有設置，那么就通過設備的dpr設置起縮放 scale，
if (!dpr && !scale) {//meta[name="viewport"]&&meta[name="flexible"]都不存在。
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他設備下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

4）得到scale之后 ，如果meta 的viewport不存在，那么就創建一meta[name=“viewport”],將scale配置進去。
    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

    if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(metaEl);
         
    } 

5）動態改寫html的font-size
    var width = docEl.getBoundingClientRect().width;//獲取html的寬度
    if (width / dpr > 540) {//判斷屏幕邏輯像素大于540時，取540
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;

總結：

使用rem布局，實質都是通過動態改寫html的font-size基準值，來實現不同設備下的良好統一適配；

網易與淘寶不同 的地方是 ，網易將布局視口設置成了 視覺視口，淘寶將布局視口設置成了物理像素大小，通過 scale縮放嵌入了 視覺視口中；

容器元素的字體大小都不使用rem，需要額外的media查詢；



參考文章鏈接：
http://www.cnblogs.com/lyzg/p...；
http://mobile.51cto.com/web-4...