项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配
实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位

前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要"
!important "进行样式覆盖。
————————————————
1 安装postcss-px2rem及px2rem-loader
npm install postcss-px2rem px2rem-loader --save
2在根目录src中新建util目录下新建rem.js等比适配文件
// rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.
clientWidth/ 1920 // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' }
// 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }
3在main.js中引入适配文件
import ‘./util/rem’
4到vue.config.js中配置插件
// 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss =
px2rem({ // 基准大小 baseSize,需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports
= { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ postcss ] }
} } }

技术
©2019-2020 Toolsou All rights reserved,
vue项目中对axios的全局封装单个按键控制多种流水灯状态软件测试之BUG描述随机森林篇 R语言实现TP6验证器的使用示例及正确验证数据C语言编程之查找某学号学生成绩一文揭秘阿里、腾讯、百度的薪资职级c语言的5种常用排序方法2021年1月程序员工资统计,平均14915元Bug数能否做为技术人员考核的KPI?