【轉】移動端的適配（網易、淘寶）

1.通用

html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

開發原則：文字流式，控件彈性，圖片等比縮放。

2.網易

基於iphone4或者iphone5的設計稿，豎直放時的橫向分辨率為640px，width: 6.4rem

html的font-size=deviceWidth / 6.4

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

（1）先拿設計稿豎着的橫向分辨率除以100得到body元素的寬度：

如果設計稿基於iphone6，橫向分辨率為750，body的width為750 / 100 = 7.5rem
如果設計稿基於iphone4/5，橫向分辨率為640，body的width為640 / 100 = 6.4rem

（2）布局時，設計圖標注的尺寸除以100得到css中的尺寸：

播放器高度為210px，寫樣式的時候css應該這么寫：height: 2.1rem

（3）在dom ready以后，通過以下代碼設置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

（4）font-size可能需要額外的媒介查詢，並且font-size不能使用rem，如網易的設置：

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}
（5）說明
a.視口設置

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

b.當deviceWidth大於設計稿的橫向分辨率時，html的font-size始終等於橫向分辨率/body元素寬

從手機訪問網易，看到的是觸屏版的頁面，如果從pad訪問，看到的就是電腦版的頁面。如果你也想這么干，只要把總結中第三步的代碼稍微改一下就行了：

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

3.淘寶

(1)通過js設置viewport

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的計算公式

font-size = deviceWidth / 10
最后還有一個情況要說明，跟網易一樣，淘寶也設置了一個臨界點，當設備豎着時橫向物理分辨率大於1080時，html的font-size就不會變化了，原因也是一樣的，分辨率已經可以去訪問電腦版頁面了。
淘寶開源：https://github.com/amfe/lib-flexible
（1）動態設置viewport的scale

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';

（3）布局的時候，各元素的css尺寸=設計稿標注尺寸/設計稿橫向分辨率/10

（4）font-size可能需要額外的媒介查詢，並且font-size不使用rem，這一點跟網易是一樣的。

5. 比較網易與淘寶的做法

共同點：

• 都能適配所有的手機設備，對於pad，網易與淘寶都會跳轉到pc頁面，不再使用觸屏版的頁面

• 都需要動態設置html的font-size

• 布局時各元素的尺寸值都是根據設計稿標注的尺寸計算出來，由於html的font-size是動態調整的，所以能夠做到不同分辨率下頁面布局呈現等比變化

• 容器元素的font-size都不用rem，需要額外地對font-size做媒介查詢

• 都能應用於尺寸不同的設計稿，只要按以上總結的方法去用就可以了

不同點

• 淘寶的設計稿是基於750的橫向分辨率，網易的設計稿是基於640的橫向分辨率，還要強調的是，雖然設計稿不同，但是最終的結果是一致的，設計稿的尺寸一個公司設計人員的工作標准，每個公司不一樣而已

• 淘寶還需要動態設置viewport的scale，網易不用

• 最重要的區別就是：網易的做法，rem值很好計算，淘寶的做法肯定得用計算器才能用好了 。不過要是你使用了less和sass這樣的css處理器，就好辦多了，以淘寶跟less舉例，我們可以這樣編寫less：

//定義一個變量和一個mixin

@baseFontSize: 75;//基於視覺稿橫屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}

//使用示例：

.container {
    .px2rem(height, 240);
}

//less翻譯結果：
.container {
    height: 3.2rem;
}