【记录】vue中实现界面rem自适应

1.下包

2.配置

用到的是vue框架，webpack已经封装好了，需要在根目录新建文件

具体内容

// postcss.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

3.根据屏幕变化调整比例

// rem.js
// 基准大小
const baseSize = 16;

// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    if (document.documentElement.clientWidth <= 760) {
        document.documentElement.style.fontSize = 14 + 'px';
    } else {
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 10)) + 'px';
    }
}

// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
};

4.入口界面调用rem.js

5.实现原理

rem是相对单位,是相对HTML根元素的fontSize

1. 通过postcss-pxtorem插件将px转换成rem
2. 自定义rem.js根据resize事件动态更改根元素fontSize的值