移动端适配-(postcss-pxtorem)

基于vue+vant的移动端适配(rem)

1.下载lib-flexible --save

npm i lib-flexible --save

2.在main.js中引入lib-flexible

main.js
import 'lib-flexible/flexible'

3.设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.安装postcss-pxtorem

用于把px转换rem的插件

npm install postcss-pxtorem -D

5.配置postcss-pxtorem

在下载完postcss-pxtorem的时候根目录会自动生成一个.postcssrc.js,尽心编辑修改
如果没有的话可以手动创建

module.exports = {
  plugins: {
    //...
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //vant-UI的官方根字体大小是37.5
      propList: ['*']
    }
  }
}

6.注意，由于为了适配vant ui（vant官方默认字体是37.5px）,所以这里rootvalue设为37.5

如果图纸是750的话，实际单位要进行缩小一半