配置前言
项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配
实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位
前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !important "进行样式覆盖。
————————————————
版权声明:本文为CSDN博主「楚猴修」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43607164/article/details/100512220
第一步,安装postcss-px2rem及px2rem-loader
打开命令行工具,输入以下指令安装插件(当然用淘宝镜像cnpm安装会更快)
npm install postcss-px2rem px2rem-loader --save
第二步,在根目录src中新建util目录下新建rem.js等比适配文件
1 // rem等比适配配置文件 2 // 基准大小 3 const baseSize = 16 4 // 设置 rem 函数 5 function setRem () { 6 // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。 7 const scale = document.documentElement.clientWidth / 1920 8 // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整) 9 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' 10 } 11 // 初始化 12 setRem() 13 // 改变窗口大小时重新设置 rem 14 window.onresize = function () { 15 setRem() 16 }
第三步,在main.js中引入适配文件
import './util/rem'
第四步,到vue.config.js中配置插件
1 // 引入等比适配插件 2 const px2rem = require('postcss-px2rem') 3 4 // 配置基本大小 5 const postcss = px2rem({ 6 // 基准大小 baseSize,需要和rem.js中相同 7 remUnit: 16 8 }) 9 10 // 使用等比适配插件 11 module.exports = { 12 lintOnSave: true, 13 css: { 14 loaderOptions: { 15 postcss: { 16 plugins: [ 17 postcss 18 ] 19 } 20 } 21 } 22 }