rem 适配方案

原创已于 2025-11-18 11:41:19 修改 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2025-08-15 15:47:29 首次发布

实现原理

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

代码 rem.ts

//utils/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>