一、lib-flexible
flexible毫无疑问在移动端自适应上还是很方便的,具体用法如下
1.安装flexible.js
npm install lib-flexible --save
2.入口文件main.js引入
import 'lib-flexible'
3.安装px2rem
npm install px2rem-loader --save
4.配置px2rem
找到 build/utils.js文件,在utils.js中添加
ok,现在你只需要按照设计稿上的px直接写布局,就会发现在各平台布局完全一致了(配置完以后不要忘记重启项目)
二、手动计算分辨率
rem是css的单位,rem的自适应布局是通过设置html标签下的font-size的大小来实现的,其实在使用flexible的时候你就会发现每次切换机型,每次都会给html设置不同的font-size,所以从原理上来说是一样的。
1.设置html下font-size:62.5%
因为100%是16px,所以设置为62.5%的话,设计稿的10px就可以直接写1rem,不过可以给你的ide装一个css转rem的插件,配置好转化比例,写css的时候就不用自己去计算了
2.计算分辨率
按照步骤一的写法只能保证在设计稿上的分辨率是完全可以的,但是肯定是需要在不同分辨率显示一样的,所以还需要这段代码
var fun = function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; //这里是假设在640px宽度设计稿的情况下,1rem = 20px; //可以根据实际需要修改 docEl.style.fontSize = 20 * (clientWidth / 640) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); } fun(document, window);当然大多数情况下,分辨率相差不多的情况下也不需要js计算1rem到底是多少px