前話 好久沒寫教程了（可能會誤導新手的菜鳥教程(￣▽￣)"）。 這是我的github，歡迎前端大大們和我一起學習交流 "https://github.com/pwcong" 最近入職公司做前端實習，這幾個星期來學到了移動端H5頁面適配。（以前根本沒做過移動端網頁/(ㄒoㄒ)/~~，還是微信端的） 所 ...
前話
好久沒寫教程了（可能會誤導新手的菜鳥教程(￣▽￣)"）。
這是我的github，歡迎前端大大們和我一起學習交流
https://github.com/pwcong
最近入職公司做前端實習，這幾個星期來學到了移動端H5頁面適配。（以前根本沒做過移動端網頁/(ㄒoㄒ)/~~，還是微信端的）
所以把我學到的一個小知識點寫下來，也分享給前端新手們。
正文
0x00 大概說明
做移動端網頁和pc端很大不同的便是現在移動端視窗解析度繁多。
很多時候UI給的設計圖只有一份，還是按照iphone6設計的，這就讓前端適配其他例如6plus或安卓等其他移動端頭疼。
還好，阿裡巴巴2015年底公開了其成熟的適配方案，lib-flexible，至於其可靠性可參考每年天貓活動的移動端頁面。
這個方案的用法大概是這樣的，HTML 頭部引入 lib-flexible 的樣式和js庫，容器或組件寬高主要使用單位 rem ，字體大小則不變仍然使用單位 px。
還有一個約束是，因為只面向移動端，因此我們限制最外層包裹的div最大寬度為 640px
我這裡只簡單介紹怎麼使用
lib-flexible實現移動端適配，如果需要深入解釋的知識，請閱讀如下文章：
https://github.com/amfe/article/issues/17
0x01 引入 lib-flexible
最新的庫文件可以到這裡下載：
https://github.com/amfe/lib-flexible
clone 下來後在 build 目錄下找到 flexible.css 和 flexible.js 在HTML頭部引入即可，例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>lib-flexible demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
...
<link href="css/flexible.css" rel="stylesheet">
<script src="js/flexible.js"></script>
</head>
<body>
...
</body>
</html>0x02 計算rem值
谷歌 rem 的用法後很多人應該大概瞭解 rem 的原理了，大概就是 rem 依賴 font-size 的值，例如預設下 1rem = 16px，因此通過在不同解析度修改 font-size 就可以達到適配不同解析度的移動端了。
需要詳細瞭解 rem 值計算可參考這篇文章 http://www.cnblogs.com/azhai-biubiubiu/p/6003597.html
rem 來做寬高定型有個最大的問題是，font-size 如何計算的問題，如何算得的 font-size 可以在不同解析度下顯示效果一致呢？
不用擔心，lib-flexible 已經幫你算好了，在你調整視窗大小的時候自動計算調整 rem 的基準，你只要做的是，按照設計圖算出能適配不同解析度的移動端的 rem 值。
這裡有個關係圖：
看不懂沒關係，看那麼多flexible的教程都放了我也就跟著放出來好了。
假如UI給了這個設計圖（找不到工作的UI (/▽＼)）：
好，我這辣雞一眼看出了：
- 這是以iphone5為標準的ui設計稿，設備視窗寬度為
640px - 中間一個色塊，居中，背景色為
#0075a9，margin-top 為100px， width 為240px，height 為120px
接下來，我們來計算rem值，計算公式很簡單：
需轉換的px值 / 設計稿寬度px值 * 10
上面的尺寸計算一下轉換成下麵的說法：
- 這是以iphone5為標準的ui設計稿，設備視窗寬度為
10rem - 中間一個色塊，居中，背景色為
#0075a9，margin-top 為1.5625rem， width 為3.75rem，height 為1.875rem
0x03 按照找不到工作的UI給的設計稿敲出代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/flexible.css" rel="stylesheet">
<script src="js/flexible.js"></script>
<style>
html, body{
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
}
body{
background: #333;
}
.container{
overflow-x: hidden;
overflow-y: auto;
position: relative;
height: 100%;
max-width: 640px;
background-color: white;
margin: 0 auto;
}
.block{
margin: 0 auto;
margin-top: 1.5625rem;
width: 3.75rem;
height: 1.875rem;
background-color: #0075a9;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
</div>
</body>
</html>0x04 不同解析度移動端下瀏覽效果
可以看到，在多個不同設備間，效果基本差不多
後話
也許你會說，我這個案例 內容太少，沒有什麼說服力。
那麼，大佬們快動起手來，在你的移動端網頁項目中用上 lib-flexible 看看能否解決移動端頁面適配問題吧。
