摘要：歡迎大家學(xué)習(xí)交流地址我的博客參考文獻(xiàn)移動(dòng)前端開(kāi)發(fā)之的深入理解原創(chuàng)移動(dòng)端高清多屏適配方案手機(jī)端頁(yè)面根據(jù)和寬度計(jì)算出對(duì)應(yīng)數(shù)值語(yǔ)法

研究了淘寶，天貓和網(wǎng)易彩票163的wap主頁(yè)樣式布局，總結(jié)移動(dòng)端布局方案
注意：代碼運(yùn)行是file協(xié)議，在chrome里不支持引用本地文件，會(huì)提示跨域錯(cuò)誤，可以用firefox或者Safari打開(kāi)

當(dāng)時(shí)做的ppt下載: 2015年12月移動(dòng)端布局方案探究

一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元

設(shè)備獨(dú)立像素(也叫密度無(wú)關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: CSS像素)

一個(gè)位圖像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)

設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素（在某一方向上，x方向或者y方向）

縮放比：scale = 1/dpr

網(wǎng)易彩票

采用scale = 1.0寫死viewport

采用媒體查詢來(lái)確定html根元素的font-size值，即rem值

rem + 百分比布局

媒體查詢的css代碼如下：

//網(wǎng)易彩票的響應(yīng)式布局是采用媒體查詢來(lái)改變r(jià)em值實(shí)現(xiàn)的
//媒體查詢css
#media-query{
    @media screen and (min-width: 240px) {
        html,body,button,input,select,textarea {
            font-size:9px!important;
        }
    }

    @media screen and (min-width: 320px) {
        html,body,button,input,select,textarea {
            font-size:12px!important;
        }
    }

    @media screen and (min-width: 374px) {
        html,body,button,input,select,textarea {
            font-size:14px!important;
        }
    }

    @media screen and (min-width: 400px) {
        html,body,button,input,select,textarea {
            font-size:15px!important;
        }
    }
    // 省略
}

天貓首頁(yè)

采用scale = 1.0寫死viewport

不采用rem，body的font-size=14px寫死

px + flexbox布局

大多數(shù)情況下，設(shè)計(jì)師產(chǎn)出各種尺寸的稿子，都是先畫出大尺寸（一般2x）的稿子，再去縮小尺寸，最后導(dǎo)出。 這樣會(huì)帶來(lái)問(wèn)題：如果設(shè)計(jì)師在2倍稿子里畫了一條1px的線（例如border：1px），這時(shí)候假如我們要在scale=1.0里呈現(xiàn)的話，就會(huì)變成0.5px，而很大一部分手機(jī)是無(wú)法畫出0.5px的。
理論上，1個(gè)位圖像素對(duì)應(yīng)于1個(gè)物理像素，圖片才能得到完美清晰的展示。在普通屏幕下是沒(méi)有問(wèn)題的，但是在retina屏幕（dpr=2）下就會(huì)出現(xiàn)位圖像素點(diǎn)不夠，從而導(dǎo)致圖片模糊的情況。

對(duì)于dpr=2的retina屏幕而言，1個(gè)位圖像素對(duì)應(yīng)于4個(gè)物理像素，由于單個(gè)位圖像素不可以再進(jìn)一步分割，所以只能就近取色，從而導(dǎo)致圖片模糊(注意上述的幾個(gè)顏色值)。所以，對(duì)于圖片高清問(wèn)題，比較好的方案就是采用兩倍圖片。如：200×300(css pixel)img標(biāo)簽，就需要提供400×600的圖片。
對(duì)于dpr=2的retina屏幕而言，1個(gè)位圖像素對(duì)應(yīng)于4個(gè)物理像素，由于單個(gè)位圖像素不可以再進(jìn)一步分割，所以只能就近取色，從而導(dǎo)致圖片模糊(注意上述的幾個(gè)顏色值)。所以，對(duì)于圖片高清問(wèn)題，比較好的方案就是采用兩倍圖片。如：200×300(css pixel)img標(biāo)簽，就需要提供400×600的圖片。

淘寶首頁(yè)

通過(guò)js處理獲取手機(jī)dpr參數(shù)，然后動(dòng)態(tài)生成viewpoint

獲取手機(jī)物理像素寬度，分成10份，每一份的寬度即是rem的尺寸。

根據(jù)設(shè)計(jì)稿的尺寸（px）分三種情況進(jìn)行處理，采用px + rem布局

相關(guān)的腳本如下：

$(document).ready(function(){
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement("style");
    var metaEl = document.querySelector("meta[name="viewport"]");
    var view1 = document.querySelector("#view-1");
    if(window.screen.width < 540){
        dpr = window.devicePixelRatio || 1;
        scale = 1 / dpr;
        rem = docEl.clientWidth * dpr / 10;
    }else{
        dpr = 1;
        scale =1;
        rem = 54;
    }
//貌似最新的淘寶網(wǎng)站又去掉了，只是限制了主體內(nèi)容的寬度

    // 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果
    metaEl.setAttribute("content", "width=" + dpr * docEl.clientWidth + ",initial-scale=" + scale + ",maximum-scale=" + scale + ", minimum-scale=" + scale + ",user-scalable=no");
    
    // 設(shè)置整體div的寬高
    view1.setAttribute("style", "width:"+ docEl.clientWidth+"px; height:"+ docEl.clientHeight+"px");

    // 設(shè)置data-dpr屬性，留作的css hack之用
    docEl.setAttribute("data-dpr", dpr);

    // 動(dòng)態(tài)寫入樣式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = "html{font-size:" + rem + "px!important;}";
    $("body").attr("style", "font-size:" + dpr * 12 +"px");

    // 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)
    window.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    window.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };

    window.dpr = dpr;
    window.rem = rem;
})

從以上的分析我們不難看出：

網(wǎng)易彩票的方案上手快，開(kāi)發(fā)效率高，兼容性好，但是不夠靈活和精細(xì)；

天貓的設(shè)計(jì)思路比較簡(jiǎn)單，flexbox非常靈活，但是flexbox的兼容性方面需要好好處理，不夠精細(xì)；

淘寶的方案幾乎解決了移動(dòng)端遇到的所有問(wèn)題，堪稱完美的解決方案，但是開(kāi)發(fā)效率低、成本比較高。

歡迎大家star學(xué)習(xí)交流：github地址 | 我的博客

移動(dòng)前端開(kāi)發(fā)之viewport的深入理解

【原創(chuàng)】移動(dòng)端高清、多屏適配方案

wap手機(jī)端頁(yè)面根據(jù)dpr和寬度計(jì)算出font-size對(duì)應(yīng)數(shù)值

less語(yǔ)法