px转vw和rem配置"/>

px转vw和rem配置

前端适配-px转-rem；

​ 最近在做一个pc端的后台管理系统，项目一期一批次已开发完毕，因为一批次没有适配要求，所以大框架时没有使用rem，业务现在又提出加入低分辨率适配；

​ 苦思冥想后决定还是百度吧，网上有很多的博客和文章，但试了很多都不能实现；经过一段时间摸索，最后总算是ok了；

此次配置使用的插件为 @moohng/postcss-px2vw

​ 使用 ：npm i @moohng/postcss-px2vw --save 即可下载；

配置：项目根目录新建一个 postcss.config.js 文件；

module.exports = {plugins: {'@moohng/postcss-px2vw': {// rootValue: 100,  // 可不填写 默认先转为vm 浏览器不支持的话才会为rem (此处为参考html字号)viewportWidth: 1536,//填入设计图宽度}}
}

打包后依然没有问题；

但是：but

这个方法有一个小问题，就是无法识别行内样式

​ 所以就找了另一个插件，可以用loader来进行解析；

插件：style-vw-loader；

​ 下载命令 npm i style-vw-loader --save;

配置：在 vue.config.js 中进行配置即可；

module.exports = {publicPath: "./",//配置loaderchainWebpack: (config) => {config.module.rule('vue').test(/\.vue$/).use('style-vw-loader').loader('style-vw-loader').options({viewportWidth: 1536,//传参})}//配置loader
}

复制 //配置loader 里面的内容即可；

按着步骤来，复制粘贴即可；（使用的是@vue.cli3,并且 style-vw-loader 插件只支持vue）

如果需要react的可以在插件源码中进行修改；

​