项目-移动端适配的几种方案

一、rem方案

以vue2项目为例

1. 下载安装包：npm install amfe-flexible --save
2. 在main.js中引入：import ‘amfe-flexible’
3. 下载安装包：npm install postcss-pxtorem --save
4. 项目下新建postcss.config.js文件，其中代码内容如下：

module.exports = {plugins: {'postcss-pxtorem': {rootValue: 75,  // 设计稿宽度的1/10，代表 1rem=75pxpropList: ['*'],  // 需要做转化处理的css属性  * 就是所有属性都要转换，如`hight`、`width`、`margin`等，`*`表示全部exclude: /node_modules/i,  // 这里表示不处理node_modules文件下的css}}
}

二、vw适配方案

以vue2项目为例：

1. 安装插件：npm install postcss-px-to-viewport --save-dev