前言

如今屏幕分辨率的范圍已經(jīng)從320px（iPhone）涵蓋到2560px（大顯示器）或者更高了。用戶不單單在桌面電腦上瀏覽網(wǎng)站，用戶如今使用移動電話，小的筆記本，平板設(shè)備（比如iPad）來訪問互聯(lián)網(wǎng)。所以傳統(tǒng)的固定寬度設(shè)計不那么理想了。web設(shè)計需要有自適應(yīng)能力。 頁面布局要可以自動的去適應(yīng)所有的分辨率和設(shè)備?，F(xiàn)在是一個移動端的時代，移動先行已經(jīng)深入骨髓，作為一個web前端開發(fā)，如果你還在為如何開發(fā)移動端頁面而迷茫，或者你還在為開發(fā)出了一個在你手機上“完美”的移動頁面而沾沾自喜卻不知移動的世界有多“殘酷”的時候，那你應(yīng)該看看這篇文章了

1. 移動設(shè)備尺寸及分辨率

下面我們來看看移動設(shè)備的分辨率

iPhone 界面尺寸：

| iPhone | iPhone6 Plus | iPhone6 | iPhone5s |
|:-|:-|:-|:-|
| 尺寸 | 5.5英寸 | 4.7英寸 | 4英寸 |
| 像素分辨率 | 1242*2208 px | 750*1334 px | 640*1136 px |

在設(shè)計的時候并不是每個尺寸都要做一套，尺寸按自己的手機尺寸來設(shè)計，比較方便預(yù)覽效果，通常設(shè)計圖是 7501334*

iPad 界面尺寸：

| iPad | iPad 3-4-5-6-Air-Air2-mini2| iPad 1-2 | iPad Mini |
|:-|:-|:-|:-|
| 像素分辨率 | 2048×1536 px | 1024×768 px | 1024×768 px |

2. 目前移動端做適配幾種常用方法：

2.1、CSS3媒體查詢

采用CSS3媒體查詢可以為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等，

@media 媒體類型 and (視口特性閥值){ /* 媒體類型可以 all screen print 等*/
    // 滿足條件的css樣式代碼
}

比如我們要為寬度大于375px的頁面中的class="content"的元素設(shè)置樣式，可以這樣寫，

@media screen and (min-width=375px) {
    .content { styles }
};

我們在使用Media的時候需要先設(shè)置Meta標簽下面這段代碼，來兼容移動設(shè)備的展示效果：

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

標簽中的幾個參數(shù)解釋：

• width = device-width：寬度等于當(dāng)前設(shè)備的寬度
• initial-scale：初始的縮放比例（默認設(shè)置為1.0）
• minimum-scale：允許用戶縮放到的最小比例（默認設(shè)置為1.0）
• maximum-scale：允許用戶縮放到的最大比例（默認設(shè)置為1.0）
• user-scalable：用戶是否可以手動縮放（默認設(shè)置為no，因為我們不希望用戶放大縮小頁面）

下面我們就來看看css3 Media具體的寫法：

下面這段css，估計很多人在響應(yīng)式的網(wǎng)站經(jīng)?？吹筋愃葡旅孢@段：

@media screen and (max-width: 960px){     
    body{         
        background: #000;     
    } 
}

這個應(yīng)該算是一個media的一個標準寫法，上面這段CSS代碼意思是：當(dāng)頁面小于960px的時候執(zhí)行它下面的CSS，這個應(yīng)該沒有太大疑問。

下面就是我們最常需要用到的媒體查詢器的三個特性，大于，等于，小于的寫法：

/*頁面小于960px的時候*/
@media screen and (max-device-width:960px){     
   html{         
       font-size: 80px;
   } 
}  

/*當(dāng)尺寸大于960px時候 */
@media screen and (min-width:960px){     
   html{         
       font-size: 90px;
   } 
}   

/* 當(dāng)頁面寬度大于960px小于1200px的時候執(zhí)行下面的CSS */
@media screen and (min-width:960px) and (max-width:1200px){     
   html{         
       font-size: 100px;  
   } 
} 

在移動端適配上通常使用的就是上面的方法，在文章后面會介紹國內(nèi)大廠的具體使用方法，認真往下看

@media媒體查詢器的功能不止這三個功能，下面是media的一些參數(shù)用法解釋：
h

• width: 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/li>
• height: 定義輸出設(shè)備中的頁面可見區(qū)域高度。
• device-width: 定義輸出設(shè)備的屏幕可見寬度。
• device-height: 定義輸出設(shè)備的屏幕可見高度。
• orientation: 檢測設(shè)備目前處于橫向還是縱向狀態(tài)。
• aspect-ratio: 檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio: 16/9)
• device-aspect-ratio: 檢測設(shè)備的寬度和高度的比例。
• color: 檢測顏色的位數(shù)。（例如：min-color: 32就會檢測設(shè)備是否擁有32位顏色）
• color-index: 檢查設(shè)備顏色索引表中的顏色，他的值不能是負數(shù)。
• monochrome: 檢測單色楨緩沖區(qū)域中的每個像素的位數(shù)。（這個太高級，估計咱很少會用的到）
• resolution: 檢測屏幕或打印機的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)。 grid：檢測輸出的設(shè)備是網(wǎng)格的還是位圖設(shè)備。

詳細功能介紹可以點擊查看

2.2、百分比適配

用百分比做適配的方法是子元素相對于父元素的百分之多少，比如父元素的寬度為100px;設(shè)置子元素的寬度可為60%;這時子元素的寬為60px;如父元素的寬度改為200px時，這時子元素的寬就是120px; 所以可將body默認寬度設(shè)置為屏幕寬度（PC中指的是瀏覽器寬度），子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實現(xiàn)很困難。

2.3、使用rem來做適配

rem：相對單位，可理解為”root em”, 相對根節(jié)點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的

在說rem之前，我們來說說關(guān)于手機視口的概念，通常在前端開發(fā)領(lǐng)域，像素有兩層含義：設(shè)備像素和css像素。

• 設(shè)備像素： 設(shè)備屏幕的物理像素，對于任何設(shè)備來講物理像素的數(shù)量是固定的。
• css像素：這是一個抽象的像素概念，它是為web開發(fā)者創(chuàng)造的。

一個CSS像素的大小是可變的，比如用后縮放頁面的時候，實際上就是在縮小或放大CSS像素，而設(shè)備像素?zé)o論大小還是數(shù)量都是不變的。

而在移動端中有三個視口，哪三個呢？

1. 布局視口：移動端css布局的依據(jù)視口，即css布局會根據(jù)布局視口來計算。
   可以通過以下JavaScript代碼獲取布局視口的寬度和高度：

document.documentElement.clientWidth
document.documentElement.clientHeight

2. 視覺視口：用戶看到的區(qū)域
3. 理想視口：理想的布局視口

什么是rem ?

rem是相對尺寸單位，rem是將根節(jié)點html的font-size的值作為整個頁面的基準尺寸，計算如下：

元素的rem尺寸 = 元素的psd稿測量的像素尺寸 / 動態(tài)設(shè)置的html標簽的font-size值

比如默認html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。當(dāng)我們把html的font-size設(shè)為20px時，1rem=20px，那么32px=1.6rem了?；诖?，我們用rem來實現(xiàn)不同尺寸屏幕的自適應(yīng)的方法就是：在頁面載入開始時首先判斷window的寬度Width（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width）），若假定屏幕寬度為750的，而不同寬度的屏幕處理的處理方法，為了能保證換算容易，需先為html設(shè)置一個合適的font-size，計算：100 / 750 = fontSize / Width, fontSize = Width / 750 * 100 = W / 7.5；

假設(shè)我們以iPhone6設(shè)計圖尺寸為標準，在設(shè)計圖的尺寸下設(shè)置一個font-size值為100px。
也就是說：750px寬的頁面，我們設(shè)置100px的font-size值，那么頁面的寬度換算為rem就等于 750 / 100 = 7.5rem。

3. 大廠的做法

下面我們來看看，大廠是怎么做的呢？

1. 京東 的web移動端(設(shè)計圖是750*1334)

/*  京東 m.jd.com */

@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size:13.65px
    }
}

@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size:15.36px
    }
}

@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size:16px
    }
}

@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size:16.64px
    }
}

@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size:17.664px
    }
}

@media screen and (min-width: 640PX) {
    html {
        font-size:27.31px
    }
}

/* 
我們來看看怎么計算的

設(shè)計圖中 尺寸40px盒子，我們可以看到在媒體查詢中，iPhone6 的布局視口是375，即html的font-size為16px，
則計算為rem： 40/16 = 2.5 rem

*/

如下圖： 京東m端在iPhone下的狀態(tài)

iPhone6

在圖中可以看到 img設(shè)置的樣式 width: 2.5rem; height: 2.5rem; 實際渲染出來的大小是 40*40
因為我們可以在css媒體查詢中看到在iPhone6下的設(shè)置html的font-size為16px； 計算就是： 40/16 = 2.5.

京東iPhone6

iPhone5

我們將其切換到iPhone5看看效果，如下圖：
同樣是剛才的圖標在5下面大小是多少呢~ ，在5下font-size的值為13.65px, 來算算結(jié)果就是 2.5*13.65 = 34.125

京東iPhone5

2. 網(wǎng)易新聞 web移動端 (設(shè)計圖大小目前版本本人看不出來，我記得16年是750*1334)

注： vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

/* 網(wǎng)易新聞 3g.163.com */


@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

body {
    font-family: PingFangSC-Regular,Microsoft YaHei,Helvetica;
    background: #f5f7f9
}

body,html a {
    color: #333
}

.hidden,.none {
    display: none!important
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px
    }

    html .wap-wrap {
        width: 768px;
        margin: 0 auto
    }
}

/* 
我們來看看怎么計算的

比如設(shè)計圖中 尺寸117px盒子，我們可以看到在媒體查詢中，iPhone6 html的font-size為50px，
則計算為rem： 117/50 = 2.34rem

*/

如下圖： 網(wǎng)易新聞在iPhone下的狀態(tài)

iPhone6

在圖中可以看到 img設(shè)置的樣式 width: 2.34rem; 實際渲染出來寬的大小是 116.98
因為我們可以在css媒體查詢中看到在iPhone6下的設(shè)置html的font-size為50px； 計算就是： 116.98/50 = 2.3396.

廢話： 我記得16年看網(wǎng)易并不是使用媒體查詢的

網(wǎng)易iPhone6

3. 阿里的 手機淘寶 觸屏版 (設(shè)計圖是750*1334)

/* 阿里手機淘寶  h5.m.taobao.com */


!function(e, t) { 

    var n = t.documentElement,
        d = e.devicePixelRatio || 1; // 設(shè)備DPR

    function i() { 
        var e = n.clientWidth / 3.75; // iPhone 6 布局視口375
        n.style.fontSize = e + "px" 
    } 

    if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)}(),
        i(),
        e.addEventListener("resize", i), 
        e.addEventListener("pageshow", function(e) { e.persisted && i() }), d >= 2) { 

            var o = t.createElement("body"), a = t.createElement("div");
            a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o) 
    } 

}(window, document)
  

如下圖是阿里手淘在iPhone6下的情況，在圖中我們可以看到html的font-size為font-size: 100px;; 然后呢他們的樣式都是在行內(nèi)的，而且window resize的時候內(nèi)容區(qū)域是不會變化的，需要重新渲染；

淘寶iPhone6

4. 小米(設(shè)計圖是720*1280)

//小米  m.com


!function(e){
    var t = e.document,
        n = t.documentElement,
        i = e.devicePixelRatio || 1,
        a = "orientationchange" in e ? "orientationchange" : "resize",
        d = function(){
            var e = n.getBoundingClientRect().width || 360; //  Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。
            (1 == i || e > 720) && (e = 720), n.style.fontSize = e/7.2 + "px" // 小米就是6啊 設(shè)計圖都是安卓 720*1280界面
        };

    n.setAttribute("data-dpr", i),
    t.addEventListener && (e.addEventListener(a, d, !1), "complete" === t.readyState ||
    t.addEventListener("DOMContentLoaded", 
        function() { 
            setTimeout(d)
        }, !1)
    )

} (window)

下圖是雷布斯的小米，小米設(shè)計圖是根據(jù)5寸（安卓 7201280）設(shè)計的，在720手機中如圖中icon的大小為 7276， html中font-size: 50px;，計算為72/50 = 1.44 rem

小米安卓