【记录】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的值

你可能感兴趣的:(其他,vue.js,javascript,前端)