摘要：做移動(dòng)端頁(yè)面以來(lái)，經(jīng)常會(huì)聽(tīng)說(shuō)移動(dòng)端的適配這個(gè)問(wèn)題，但是并沒(méi)有認(rèn)真分析過(guò)是如何適配各種機(jī)型的。目前公司用的是手淘的進(jìn)行頁(yè)面適配的。手淘那個(gè)還有的地方看不懂，還是自己太了，但是看不懂車(chē)不影響老司機(jī)開(kāi)車(chē)。

做移動(dòng)端頁(yè)面以來(lái)，經(jīng)常會(huì)聽(tīng)說(shuō)移動(dòng)端的適配這個(gè)問(wèn)題，但是并沒(méi)有認(rèn)真分析過(guò)是如何適配各種機(jī)型的。目前公司用的是手淘的flexible.js進(jìn)行頁(yè)面適配的。適配的根本原理其實(shí)就是將設(shè)計(jì)稿按一定的比例在不同的手機(jī)上實(shí)現(xiàn)。

在分析移動(dòng)段適配之前首先要了解一下rem, css3的一個(gè)相對(duì)長(zhǎng)度單位。既然是相對(duì)長(zhǎng)度，那就有一個(gè)參照體了，rem就是相對(duì)于html元素的font-size計(jì)算值的倍數(shù)。即1rem 等于一倍的html元素的font-size值。

最早看到這個(gè)適配是在同事的代碼里，當(dāng)時(shí)并不知到是什么原理，也并不明白這些數(shù)字是怎么來(lái)的。

@media screen and (min-width:350px){
    html{font-size:342%;}
}
@media screen and (min-width:360px){
    html{font-size:351.56%;}
}
@media screen and (min-width:375px){
    html{font-size:366.2%;}
}
@media screen and (min-width:384px){
    html{font-size:375%;}
}
@media screen and (min-width:390px){
    html{font-size:380.85%;}
}
@media screen and (min-width:393px){    /* 小米NOTE */
    html{font-size:383.79%;}
}
@media screen and (min-width:410px){
    html{font-size:400%;}
}
@media screen and (min-width:432px){ /* 魅族3 */
    html{font-size:421.875%;}
}
@media screen and (min-width:480px){
    html{font-size:469%;}
}
@media screen and (min-width:540px){
    html{font-size:527.34%;}
}
@media screen and (min-width:640px){
    html{font-size: 625%;}
}

@media screen and (width:720px){
    html{font-size: 703.125%;}
}

@media
媒體查詢(xún)， 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

上述代碼中，第一個(gè)@media screen and (min-width:350px)表示當(dāng)移動(dòng)設(shè)備的寬度大于350px的時(shí)候頁(yè)面將使用花括號(hào)內(nèi)的樣式，即將html根元素的字號(hào)設(shè)置為342%。(max-width:350px,則表示設(shè)備寬度小于350px時(shí)將采用此樣式)。上述css代碼的作用可見(jiàn)就是在不同分辨率的設(shè)備上設(shè)置不同的html字體大小。

為什么要這樣設(shè)置呢？因?yàn)檫@種適配方法用的是css3的rem來(lái)進(jìn)行適配的，而前面講了，rem是相對(duì)于html的字號(hào)來(lái)計(jì)算的，現(xiàn)在不同的設(shè)備上html的字號(hào)改變了，也就意味這1rem代表的px像素值不同了，也就達(dá)到了按比例在不同設(shè)備上適配同一個(gè)頁(yè)面的效果了。

html元素的font-size值又是怎么確定的呢？拿下面的舉例：

@media screen and (min-width:375px){
    html{font-size:366.2%;}
}

屏幕寬度大于375px的會(huì)按照寬度375px來(lái)適配。設(shè)計(jì)同時(shí)平時(shí)給我們的設(shè)計(jì)稿一般是640px寬度或者750px寬度的，而我們上面的都是假定設(shè)計(jì)稿是640px寬來(lái)計(jì)算的，750px也是同理計(jì)算?，F(xiàn)在：

1.屏幕寬度是375，設(shè)計(jì)稿寬度是640，ratio = 375/640=0.5859375;
2.我們要將設(shè)計(jì)稿上元素用css單位rem寫(xiě)下來(lái)，那么該如何轉(zhuǎn)換，1rem應(yīng)該等于稿子上多少px。
這里我們?cè)O(shè)定1rem = 100px ;可以設(shè)定其它值嗎，當(dāng)然可以，這里設(shè)置為100只是方便我們?cè)趯?xiě)css的時(shí)候好計(jì)算，小數(shù)點(diǎn)直接左移兩位就可以了。比如，設(shè)計(jì)稿上一個(gè)寬46px按鈕，這樣轉(zhuǎn)換成rem直接就是0.46rem。
3.現(xiàn)在1rem代表設(shè)計(jì)稿上100px,那么又該是等于設(shè)備上最后真實(shí)的多少像素呢。就要用到前面的屏幕寬度和設(shè)計(jì)稿的寬度比 ratio,設(shè)計(jì)稿上100px代表了真實(shí)的設(shè)備100*ratio = 58.59375px。
換句話(huà)說(shuō) css中寫(xiě)的1rem等于設(shè)備58.59375px。又因?yàn)?rem等于1倍的html元素的font-size,所以這里的html元素的font-size最終應(yīng)該設(shè)置成58.59375px?？蔀槭裁瓷鲜龃a中用的是百分比呢？因?yàn)橐话銥g覽器中html元素的默認(rèn)字號(hào)都是16px，但是當(dāng)用戶(hù)放大或者縮小瀏覽器字號(hào)設(shè)置時(shí)，就不會(huì)是16px了，所以我們將html的font-size還是設(shè)置成百分比更好，即 58.59375/16= 366.2109375%,也就是上面例子中的366.2%了。

其它的屏幕上也是同此道理計(jì)算出html的font-size值的。

@media + rem適配移動(dòng)端還有一個(gè)不可少的條件就是要在head標(biāo)簽中寫(xiě)入一個(gè)meta標(biāo)簽。 ;關(guān)于viewport的了解可以看這里。此標(biāo)簽的作用是讓layout viewport = visual viewport,用戶(hù)也不可縮放頁(yè)面。

flexible.js也是rem適配的，它是將設(shè)備分成10份，1rem等于1/10。分析其中部分代碼：

   var devicePixelRatio = win.devicePixelRatio;

        dpr = devicePixelRatio || 1;
        if (isIPhone) {

            // iOS下，對(duì)于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 {
            // 其他設(shè)備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
        
       ......
       .......
        
       metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

win.devicePixelRatio(簡(jiǎn)稱(chēng)dpr),即設(shè)備像素比（戳我了解）

上述代碼當(dāng)dpr(設(shè)備物理像素和設(shè)備獨(dú)立像素比)為3時(shí)候，頁(yè)面縮入1/3,dpr為2時(shí)，頁(yè)面綻放2/1。

   function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        flexible.rem = win.rem = rem;
    }

上述代碼將1rem設(shè)置成了設(shè)備真實(shí)寬度的1/10，因此html根元素的fontSize也就是設(shè)備真實(shí)寬度的1/10，假如設(shè)計(jì)老鐵們給的漂亮稿子是750px寬的，寫(xiě)scss時(shí)1rem也就應(yīng)該等于75px,那邊我么的scss文件可以這樣寫(xiě)：

@function px2rem($px, $base: 75) {
    @return ($px / $base) * 1rem;
}
/*
稿子上量得某按鈕寬60px,高20px
*/
.btn{
    width:px2rem(60);
    height:px2rem(20);
}

vw:viewport width(可視窗口寬度)
vh:viewport height(可視窗口高度)
vw和vh等詳情可以點(diǎn)這里
1vw等于1%的設(shè)備寬度(設(shè)計(jì)稿寬度)，1vh等于1%的設(shè)備高度(設(shè)計(jì)稿高度),這樣看來(lái)vw,vh其它是最方便的，但是目前兼容性不是特別好。

所以只有在不需要考慮兼容的時(shí)候可以用這個(gè)相對(duì)最簡(jiǎn)便的適配方案了,比如一些混合開(kāi)發(fā)里，app內(nèi)的瀏覽器如果支持vw、vh，只在app內(nèi)使用的頁(yè)面就可以放心大膽的用了。像下面的

客戶(hù)端內(nèi)的右下角webview，一個(gè)小的PK對(duì)決頁(yè)面，這里就是用的vw,vh進(jìn)行適配的。

/*右下角窗口設(shè)計(jì)稿寬200px，高220px*/
@function px2vw($px, $base: 200) {
  @return ($px/($base/100)) + vw;
}
@function px2vh($px, $base: 220) {
  @return ($px/($base/100)) + vh;
}
/*頭像寬42px,高42px*/
.avantar{
    width:px2vw(42);
    heightx:px2vh(42);
}

目前工作中用到的就是后面的兩種適配方案了。手淘那個(gè)還有的地方看不懂，還是自己太Low了，但是看不懂車(chē)不影響老司機(jī)開(kāi)車(chē)。