一: rem适配
引入插件 amfe-flexible 和 postcss-px2rem;
在package.json中配置:
remUnit根据设计图大小1:0.1配置,这样就可以根据设计图的尺寸直接用px,postcss-px2rem会直接转换成rem
在main.js中引入amfe-flexible:
import 'amfe-flexible'
amfe-flexible会根据不同手机给html加font-size,这样就OK拉
二: vw 和 vh
这个配合sass最好,给css设两个计算函数,然后使用就好了,这个好像是兼容android 4.4和iOS8以上,现在手机也基本都没问题的
@function vw($px) {
@return ($px / 1080) * 100vw;
}
@function vh($px) {
@return ($px / 1753) * 100vh;
}
...
body{
width: vw(1080);
height: vw(1753);
}