移动端使用rem(页面使用px实际转化为rem)
前提是需要一个转化插件——>postcss-pxtorem:转换px为rem的插件。
第一步:安装插件 postcss-pxtorem;
npm install postcss-pxtorem --save
第二步:在src目录下新建rem文件夹,目录下新建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()
}
第三步:在main.js中引入;
import './rem/rem.js'
第四步: 修改.postcssrc.js 文件,plugins中添加如下代码
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
第五步:在开发中使用px为单位直接开发吧,实际上已经转化为了rem单位