vue项目中px自动转换为rem

作者: 小枫枫

临枫的项目经历分享给你们啦~

扫码交朋友

标签:

特别声明:文章有少部分为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

rem.js

// rem等比适配配置文件
// 基准大小
const baseSize = 100;
// 设置 rem 函数
export function setRem() {
// 当前页面宽度相对于 宽的缩放比例,可根据自己需要修改。
constscale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
consthtmlFontsize = baseSize * Math.min(scale, 2);
document.documentElement.style.fontSize = htmlFontsize + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};

 

在main.js引入rem.js

 

 安装插件

cnpm install postcss-pxtorem -D

在 Vue 项目src下创建文件postcss.config.js 并写入:

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 100, // 基准大小 1rem = 100px
      propList: ["*"],
      selectorBlackList: ["el-","van-"],//如果是elementui 或者 vantui 则不转rem
    },
  },
};

 

重启项目 单位使用px即可  若不转rem的地方 比如字体 px 写为Px 、pX 或者 PX即可

 

分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《vue项目中px自动转换为rem》 发布于2023-1-5

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏