VUE项目移动端适配方案

vue实现移动端适配步骤如下:

1.先安装amfe-flexible

npm install amfe-flexible 

yarn add amfe-flexible

2.在main.js导入amfe-flexible

import 'amfe-flexible';

3.下载postcss 和postcss-pxtorem@5.1.5 (注意这里的插件版本,请使用5.1.1)

yarn add postcss postcss-pxtorem@5.1.1

4. 在项目根目录下新建postcss.config.js文件，配置以下代码：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

使用备注：项目中postcss只能翻译style里面的css样式代码，标签内的行内样式无法让px转换成rem,所以需要自己换算进行转换