vue使用rem适配(亲测有效)
1.使用插件当前插件版本:postcss^8.3.6 postcss-pxtorem^5.1.1npm i postcss postcss-pxtorem -D2. 在vue.config.js中配置css: {loaderOptions: {postcss: {plugins: [require("postcss-pxtorem")({// 换算基数,rootValue: 16
·
1.使用插件
当前插件版本:postcss^8.3.6 postcss-pxtorem^5.1.1
npm i postcss postcss-pxtorem -D
2. 在vue.config.js中配置
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-pxtorem")({
// 换算基数,
rootValue: 16,
//允许REM单位增长到的十进制数字,小数点后保留的位数
unitPrecision: 5,
propList: ["*"],
//默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
exclude: /(node_module)/,
//(布尔值)允许在媒体查询中转换px。
mediaQuery: false,
//要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
selectorBlackList: [".van"],
//设置要替换的最小像素值
minPixelValue: 1,
}),
],
},
},
},
3. 新建rem文件
const baseSize = 16;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375;
// 设置页面根节点字体大小
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
4.在main中引入
import "./utils/rem";
5.结果
更多推荐
已为社区贡献4条内容
所有评论(0)