[TOC]
# 介紹
移動web端的開發長久以來，從最開始的寬度自適應，流動布局(fluid grid)，慢慢的到 2010年5月份，Ethan Marcotte提出的一個概念 ”自適應網頁設計”([Responsive Web Design](https://alistapart.com/article/responsive-web-design/))，這個概念可以說是現在移動web端設計的基石。
如何適配數不清的屏幕尺寸，曾經是困擾前端開發人員的一大難題。
響應式布局的解決方案無法實現真正的移動適配，它的適配只能解決pc大屏幕到手機小屏幕的問題，但是手機屏幕任然有很多種。
# 頁面需求
這是尺寸標注圖(標注了的效果圖)（750*1334）：
然后美工在 `750*1334` 的設計稿之上，按我的要求提供以下素材的切圖：
包括兩個下載按鈕的背景圖片，logo，底部梯形的漸變背景和body部分的mobile 背景圖。注意這些圖片都是在`750*1334`的設計稿里面切出來的，所以尺寸都是設計稿里的原始尺寸，比如android.png：
考慮到retina顯示屏的問題，結合下圖的適配思路：
我認為解決retina屏問題的可行方案是：
1）在`devicePixelRatio<=2`時，圖片統一使用750設計稿的切圖
2）在`devicePixelRatio>=2`時，圖片統一使用`750*1.5=1125`，也就是所謂@3x設計稿的切圖。
我把美工給我的在750*1334的設計稿下的切圖都放在img/@2x 這個文件夾下：
然后讓她幫忙把750的設計稿矢量放大1.5倍，再按照同樣的切圖要求為我提供@3x的切圖，并放在了img/@3x 這個文件夾下：
@3x下的圖片理論上尺寸應該等于@2x下的圖片*1.5，不過我的切的沒有這么完美。
有了前面的需求介紹和素材準備，下一步就是該引入核心的js文件，編寫css樣式了。
# 引入flexible.js
這一步其實非常簡單，只要把 https://github.com/amfe/lib-flexible 源碼里flexible.js的內容復制出來，在本地新建一個flexible.js的文件，打開粘貼進去就可以了，我把這個文件放在了`js/lib`下面：
接著在html頁面里面，盡可能早的引入這個js文件（一句話總結：**在瀏覽器中文檔流是從上往下加載渲染的。為了保證發生不必要的重繪或者是重排肯定是越早給根節點設置font-size值越好。**）：
```html
...
<head>
...
<script src="js/lib/flexible.js?v=1450433481578"></script>
...
</head>
...
```
注：使用`lib-flexible`，通常不要寫：
~~~
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
~~~
交給 `flexible.js` 自動處理。
然后在chrome的模擬器里面，選擇iphone6，應該就能看到html的`font-size`已經被設置為`font-size: 75px`了：
# 編寫CSS
基本要求：
1. 除`font-size`外(字體還是用px，比較好)，其它大小都根據750標注稿的尺寸，轉換成rem單位的值，轉換方法為：標注稿尺寸 / 標注稿基準字體大小；
2. 標注稿基準字體大小 = 標注稿寬度 / 10，如標注稿寬為750，標注稿基準字體大小為75；標注稿寬為640，標注稿基準字體大小為64；（所以淘寶這個方案是可以在任意設計稿尺寸下使用的）
3. 如果需要設置`font-size`，可跟據html的`data-dpr`屬性來處理，類似下面的寫法：
```css
[data-dpr="2"] p {
font-size: 16px;
}
[data-dpr="3"] p {
font-size: 24px;
}
```
以安卓下載按鈕的樣式為例，說明這種用法。android.png的尺寸為：`414*80`，所以css這么寫：
```css
.btn {
width: 414rem/@font-size-base;
height: 80rem/@font-size-base;
}
```
由于用了less，事先定義了一個變量來保存標注稿基準字體大小：
```
@font-size-base: 75;
```
所以px2rem的轉換變得非常容易，如上所示。less編譯之后，會將正確的rem值計算出來：
```css
.btn {
width: 5.52rem;
height: 1.06666667rem;
}
```
到此，`lib-flexible`的基本實踐就結束了，不過還有一個問題，就是retina屏的問題，到現在都還沒提到@3x下圖的那些切圖怎么辦，其實很簡單，借助html元素的data-dpr屬性，可以輕松實現另一種媒介查詢，以便在devicePixelRatio>=2的時候啟用@3x下的圖片，還是以安卓下載按鈕的樣式為例，寫法是：
```css
.btn-android {
background-image: url("../img/@2x/android.png?v=@@version");
[data-dpr="3"] & {
background-image: url("../img/@3x/android.png?v=@@version");
}
}
```
這下就OK了，原先還不知道`data-dpr`有什么作用，現在看看，作用還是挺大的。
# 小結
我把源碼發出來，有興趣的人可以下載參考：[本頁源碼](http://files.cnblogs.com/files/lyzg/finance-h5.zip)。
注：
1） 由于使用了`grunt`構建，所以需要先安裝node ,git，再通過npm安裝`grunt` 和`bower`
2）考慮到將來可能要做全屏滾動的效果，所以這頁面一開始就是用`fullpage.js`來做的，通過bower引入了jquery跟fullpage.js的庫
3） 模塊化用到了`requirejs`
4）運行`grunt default`完成構建，再運行grunt server啟動靜態服務器預覽。
# 總結
* 都能適配所有的手機設備，對于 pad，網易與淘寶都會跳轉到 pc 頁面，不再使用觸屏版的頁面
* 都需要動態設置 html 的 font-size
* 布局時各元素的尺寸值都是根據設計稿標注的尺寸計算出來，由于 html 的 font-size 是動態調整的，所以能夠做到不同分辨率下頁面布局呈現等比變化
* 容器元素的 font-size 都不用 rem，需要額外地對 font-size 做媒介查詢
最終我們采用了基于 rem 做寬度，viewport 縮放 的 解決方案，很好的實現了適配各類屏幕。
同時采用了 fekey（px To rem）來解決書寫 rem 不方便的問題，這樣我們在寫樣式的時候只要和按照**UE標準的750px**來就行了，fekey 會自動幫助我們轉為 rem。經過測試在低端的 Android 機上或者是 dpr 等于2的 IPhone6s 和dpr等于3 的 IPhone6s plus 都能很好的按照交互圖來展示。
可以說基于rem適配原理的這一套解決方案，我們已經能夠輕松適配各種類型、各種大小的屏幕。
**最后還有一個情況要說明**：跟網易一樣，淘寶也設置了一個臨界點，當設備豎著時橫向物理分辨率大于1080時，html的`font-size`就不會變化了，原因也是一樣的，分辨率已經可以去訪問電腦版頁面了。
# 參考
[淘寶彈性布局方案lib-flexible實踐](http://www.cnblogs.com/lyzg/p/5058356.html)
[移動端適配之REM](http://www.jianshu.com/p/dfa33d3be23c)
[使用Flexible實現手淘H5頁面的終端適配](https://github.com/amfe/article/issues/17)
[白樹-移動web頁面使用字體的思考](http://www.cnblogs.com/PeunZhang/p/3592096.html)
https://segmentfault.com/a/1190000004524243
https://segmentfault.com/a/1190000008754170
https://segmentfault.com/a/1190000004344753
https://segmentfault.com/q/1010000005148519
https://segmentfault.com/a/1190000003690140
- 前言
- 中文字體
- 移動Web適配方案
- !移動Web基礎!
- 詳解適配相關概念
- 移動開發之設計稿
- 移動適配方案（一）
- 移動適配方案（二）
- vw+rem 實現移動端布局
- 移動端適配之雪碧圖(sprite)背景圖片定位
- 適配 iPhoneX
- 前端開發實戰
- 打造自己的前端開發流程（Gulp）
- flexible.js案例講解
- viewport 與 flexible.js解讀
- 圖片與字體
- 踩過的坑
- 瀏覽器默認樣式
- 300ms點擊延遲和點擊穿透
- ios css
- CSS 常見問題
- Ionic v1混合開發
- Native App、Web App 、Hybrid App？
- ionic項目結構
- 混淆加密
- 解決問題
- cordova
- 環境配置
- 打包發布
- 問題
- 移動前端開發優化
- Web開發之抓包
- ===web移動開發資源===
- H5組件框架
- 調試集合
- 簡單h5調試
- whistle
- devtools-pro