前端适配-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: "./",
//配置loader
chainWebpack: (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的可以在插件源码中进行修改;