教你如何用 lib-flexible 实现移动端H5页面适配
前話
好久沒寫教程了（可能會誤導(dǎo)新手的菜鳥教程(￣▽￣)"）。
這是我的github，歡迎前端大大們和我一起學(xué)習(xí)交流
https://github.com/pwcong
最近入職公司做前端實習(xí)，這幾個星期來學(xué)到了移動端H5頁面適配。（以前根本沒做過移動端網(wǎng)頁/(ㄒoㄒ)/~~，還是微信端的）
所以把我學(xué)到的一個小知識點寫下來，也分享給前端新手們。
正文
0x00 大概說明
做移動端網(wǎng)頁和pc端很大不同的便是現(xiàn)在移動端窗口分辨率繁多。
很多時候UI給的設(shè)計圖只有一份，還是按照iphone6設(shè)計的，這就讓前端適配其他例如6plus或安卓等其他移動端頭疼。
還好，阿里巴巴2015年底公開了其成熟的適配方案，
lib-flexible，至于其可靠性可參考每年天貓活動的移動端頁面。這個方案的用法大概是這樣的，HTML 頭部引入
lib-flexible 的樣式和js庫，容器或組件寬高主要使用單位 rem ，字體大小則不變?nèi)匀皇褂脝挝? px。還有一個約束是，因為只面向移動端，因此我們限制最外層包裹的div最大寬度為 640px
我這里只簡單介紹怎么使用
lib-flexible 實現(xiàn)移動端適配，如果需要深入解釋的知識，請閱讀如下文章：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 的用法后很多人應(yīng)該大概了解 rem 的原理了，大概就是 rem 依賴 font-size 的值，例如默認(rèn)下 1rem = 16px，因此通過在不同分辨率修改 font-size 就可以達(dá)到適配不同分辨率的移動端了。需要詳細(xì)了解 rem 值計算可參考這篇文章 http://www.cnblogs.com/azhai-biubiubiu/p/6003597.html
rem 來做寬高定型有個最大的問題是， font-size 如何計算的問題，如何算得的 font-size 可以在不同分辨率下顯示效果一致呢？不用擔(dān)心，
lib-flexible 已經(jīng)幫你算好了，在你調(diào)整窗口大小的時候自動計算調(diào)整 rem 的基準(zhǔn)，你只要做的是，按照設(shè)計圖算出能適配不同分辨率的移動端的 rem 值。這里有個關(guān)系圖：
看不懂沒關(guān)系，看那么多flexible的教程都放了我也就跟著放出來好了。
假如UI給了這個設(shè)計圖（找不到工作的UI (/▽＼)）：
好，我這辣雞一眼看出了：
接下來，我們來計算rem值，計算公式很簡單：
需轉(zhuǎn)換的px值 / 設(shè)計稿寬度px值 * 10
上面的尺寸計算一下轉(zhuǎn)換成下面的說法：
0x03 按照找不到工作的UI給的設(shè)計稿敲出代碼
<!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 不同分辨率移動端下瀏覽效果
可以看到，在多個不同設(shè)備間，效果基本差不多
后話
也許你會說，我這個案例 內(nèi)容太少，沒有什么說服力。
那么，大佬們快動起手來，在你的移動端網(wǎng)頁項目中用上
lib-flexible 看看能否解決移動端頁面適配問題吧。總結(jié)
以上是生活随笔為你收集整理的教你如何用 lib-flexible 实现移动端H5页面适配的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： box-sizing -- 盒模型
- 下一篇： calc() ---一个会计算的css属