從事前端開發(fā)已差不多有兩年的時間了, 在這里給大家分享下我個人覺得簡單好用的移動端尺寸自適應(yīng)的一個方法, 希望能幫到大家
第一步:? 引入js文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
在你的項目中引入適配庫,?推薦大家通過CDN引用它, 當(dāng)然也可以下載到本地,建議對于js做內(nèi)聯(lián)處理竖幔，在所有資源加載之前執(zhí)行這個js亮隙。
第二步: 把設(shè)計稿中的px轉(zhuǎn)化為rem
工作中我們常見的視覺稿大小大至可為640、750史汗、1125三種霎褐。不過flexible.js并沒有限制只能用這三種，所以你還可以根據(jù)自身情況來調(diào)整，具體如何轉(zhuǎn)換桃笙，我們以視覺稿為750px的寬來舉例子，把750px分為100份沙绝，每一份稱為一個單位a搏明，那么每個a就是7.5px，而1rem單位被認(rèn)定為10a闪檬，此時星著，1rem=1(a)X10X7.5(px)即75px。例如一個100px * 100px的div, 轉(zhuǎn)換后是1.33333rem * 1.33333rem
但在實際開發(fā)中, 我們自己計算效率肯定是大打折扣,著這里我們可以借助一個工具cssrem. 我用的是vscode開發(fā)工具(輕量級簡單好用), 下載cssrem插件,然后在設(shè)置里面找到cssrem.rootFontSize, 把數(shù)值設(shè)為75(一般情況下移動端設(shè)計稿默認(rèn)是750, 1rem就是75px, 大家可以根據(jù)設(shè)計稿尺寸自行調(diào)整). 到這為止我們的準(zhǔn)備工作就做完了, 下面就是在頁面中用rem來代替px
第三步:? 頁面中用rem來替代px
在css樣式中, 我們還像平時一樣輸入px, 會自動出來轉(zhuǎn)換后的rem, 到這里就大功告成了, 快來試一試吧!
本文參考鏈接：http://www.reibang.com/p/04efb4a1d2f8, 在這里也要感謝博主的分享
