rem 适配方案

实现原理

rem 是相对于根元素 HTML 的 font-size 计算的单位，我们可以根据屏幕宽度动态调整根字体大小。

代码 rem.ts

/*** 全局搜索$baseSize 同步更改sass内的$baseSize值  使用px()函数代替px生成rem* 建议设置大小为 80* 1920分辨率下 1rem === 80px*/
const $baseSize = 80;
const scale = ref();
// rem 函数
function setRem() {// 设计稿一般都是以1920*1080// scale.value = Math.min(document.documentElement.clientWidth / 1920, document.documentElement.clientHeight / 1080); // 等比缩放（宽高取小）scale.value = (document.documentElement.clientWidth / 1920 * 0.5 + document.documentElement.clientHeight / 1080 * 0.5); // 权重调整// 设置页面根节点字体大小 Math.min(scale, 2)指最高放大比例为2，可根据实际业务需求调整document.documentElement.style.fontSize = $baseSize * Math.min(scale.value, 4) + 'px';window['_nowScale'] = scale;
};// 调用方法
setRem();// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {setRem();
};

全局样式文件 mixins.scss

// px转rem
$baseSize: 80; // 根目录字体大小 px
@function px($px) {@return  calc($px / $baseSize * 1rem);
}

组件中使用方法

<template><div id="home"><ul class="card-box"></ul></div>
</template><style lang="scss">
#home{
width:px(100)
height:px(100)
}
</style>