Vue中 px
自动 转换为 rem
,通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目自动编译,转换成rem
自动设置根节点html的font-size
rem单位
是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem
的大小
1、创建rem.js
文件
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
2、在main.js中引入rem.js
import './assets/js/rem';
引入文件后,查看页面的html节点,是否有被自动添加 font-size。
完成到这一步,也就是实现了rem布局,实际开发的时候,还是需要我们去计算对应的rem值去开发
配置一下package,自动转换px为对应的rem值
安装 postcss-pxtorem 自动转换px为rem
$ npm install postcss-pxtorem -D
修改根目录package.json 文件
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"propList": [
"*"
],
"selectorBlackList": [
"mint-",
"picker-",
"mt-"
]
}
}
}
配置完成后,就可以直接在项目中使用px
开发