vue px转rem，样式自适应各个分辨率

vue px转rem

在项目中，常常会需要页面样式自适应各个分辨率，我的项目一般需要适应1440 * 768至1920*1080 125%的分辨率。因为我们拿到的设计图都是1920 * 1080的，一般都是用px写的，如果是vue项目可以创建项目的时候加上postcss-pxtorem，这样会自动把px编译成rem，不用像传统的html项目，用@media写多套样式了。

按照正常流程，当然是先下载依赖啦

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

在main.js全局引入

import 'amfe-flexible'

配置postcss-pxtorem

vue-cli 2.x版本的配置
在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
        propList: ['*'], // 需要被转换的属性
        selectorBlackList: ['el'] // 不进行px转换的选择器，不转换element的标签样式，根据自己项目需求来定义    }
  }
}

vue-cli 3.x和vue-cli 4.x版本的配置一样，如下
在项目的根路径下新增postcss.config.js文件，
把以下代码放进去

module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
propList: ['*'], // 需要被转换的属性
selectorBlackList: ['el'] // 不进行px转换的选择器，不转换element的标签样式，根据自己项目需求来定义
}
}
}

如果有的样式不想被 转换，可以用Px或者pX，例

.unchange{
	width:300Px;
}

在最后给小伙伴们一些其他px转rem的插件的官网，大家感兴趣的可以自己去看看，
postcss-plugin-px2rem官方文档：https://www.npmjs.com/package/postcss-plugin-px2rem
postcss-pxtorem官方文档：https://www.npmjs.com/package/postcss-pxtorem
postcss-px2rem官方文档：https://www.npmjs.com/package/postcss-px2rem

px转rem的，小编只用过postcss-pxtorem，至于哪个更胜一筹，需要小伙伴们自己去探索啦~~