目录
一、下载插件
npm i postcss-pxtorem -S
二、在utils文件夹下新建rem.js文件
// 跟.postcssrc.js里的rootValue的值是一致的
const baseSize = 100
// 设置rem函数
function setRem() {
// 当前页面宽度相对于1920宽的缩放比例,可根据自己需要修改。pc端一般使用的是1920,这里使用1920px
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小,最高为两倍图,及设计稿为1920*2
console.log((baseSize * Math.min(scale, 2)), '8888')
document.documentElement.style.fontSize = ((baseSize * Math.min(scale, 2)) > 12 ? (baseSize * Math.min(scale, 2)) : 12) + 'px'
console.log(document.documentElement.style.fontSize, '8888')
}
// 初始化
setRem()
// 改变窗口大小时重新设置rem
window.onresize = function() {
setRem()
}
三、在main.js中引入rem.js
import '@/utils/rem'
四、在根目录新建.postcssrc.js文件
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
'plugins': {
'postcss-pxtorem': {
rootValue: 100, // 换算基数,默认100,把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
// unitPrecision: 5, //保留rem小数点多少位
propList: ['*'] // 存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换
// selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器,例如fs-xl类名,里面有关px的样式将不被转换,支持正则写法。
// replace: true,
// mediaQuery: false,//(布尔值)媒体查询( @media screen 之类的)中不生效
// minPixelValue: 12,///设置要替换的最小像素值,px小于12的不会被转换
// //propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性
// propBlackList: ['font-size'], //黑名单
}
}
}
注意:如果没设置文字大小会按照100px进行设置