移动端适配方案

632 阅读1分钟

一: 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);
}