教你如何用 lib-flexible 实现移动端H5页面适配
前話
好久沒寫教程了（可能會誤導新手的菜鳥教程(￣▽￣)"）。
這是我的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 (/▽＼)）：
好，我這辣雞一眼看出了：
接下來，我們來計算rem值，計算公式很簡單：
需轉換的px值 / 設計稿寬度px值 * 10
上面的尺寸計算一下轉換成下面的說法：
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 看看能否解決移動端頁面適配問題吧。總結
以上是生活随笔為你收集整理的教你如何用 lib-flexible 实现移动端H5页面适配的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： box-sizing -- 盒模型
- 下一篇： 文档声明和HTML样式表