在 Vue 3 项目配置 rem

在 Vue 3 中配置 rem 时，设计稿1920，如果你希望实现一个最小宽度为 1024px 的适配，意思是当屏幕宽度小于 1024px 时不再缩小字体大小，始终保持最小宽度的 rem 配置。可以通过动态设置根元素的字体大小来实现。

一、安装插件

pnpm install amfe-flexible --save

二、自定义方法

根目录新建 utils/rem.js文件

(function () {
  const baseWidth = 1920; // 设计稿宽度
  const baseFontSize = 16; // 根字体大小（1rem = 16px）
  const docEl = document.documentElement;

  const resize = () => {
    const clientWidth = Math.max(docEl.clientWidth, 1024); // 设置最小宽度限制
    const scale = clientWidth / baseWidth;
    console.log(baseFontSize * scale, "字体大小");
    let fontSize = baseFontSize * scale;
    if (fontSize < 12) {
      fontSize = 12;
    }
    docEl.style.fontSize = fontSize + "px";
  };

  resize();
  window.addEventListener("resize", resize);
})();

三、main.ts引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "amfe-flexible";
import "./utils/rem.js";



createApp(App).mount('#app')

四、使用

<script setup lang="ts">
</script>

<template>
  <div>
    测试适配文字大小
  </div>
</template>

<style scoped>
div {
  font-size: 1rem;
}
</style>