在 Vue 3 中配置 rem 时，如果你希望实现一个最小宽度为 1024px 的适配，意思是当屏幕宽度小于 1024px 时不再缩小字体大小，始终保持最小宽度的 rem 配置。可以通过动态设置根元素的字体大小来实现。
步骤说明：
动态设置根字体大小：根据屏幕宽度动态计算根元素（<html> 标签）的字体大小。
设置最小宽度限制：当屏幕宽度小于 1024px 时，根字体大小保持固定，避免字体过小。
使用 rem 单位：通过 rem 单位来设置元素的尺寸。
示例：实现动态根字体大小，最小宽度为 1024px
首先，我们通过 JavaScript 在 main.js 中动态调整根字体大小。然后，我们确保当屏幕宽度小于 1024px 时，根字体大小不再缩小，始终保持基准大小。
1. 在 main.js 中设置根字体大小
<script setup>
// 设置根字体大小函数
function setRem() {
const baseWidth = 1920; // 基准宽度，例如 1920px 是设计稿的宽度
const minWidth = 1024; // 最小宽度限制，确保屏幕宽度不低于 1024px
const width = window.innerWidth || document.documentElement.clientWidth;
// 计算根字体大小
let fontSize = (width / baseWidth) * 18; // 1920px 对应 16px 根字体大小
// 如果屏幕尺寸还没有到1024，这时候字体已经小于12，那么就设置为12
if (fontSize < 12) {
fontSize = 12
}
// 限制屏幕宽度最小值为 1024px
if (width < minWidth) {
fontSize = 12; // 如果小于 1024px，设置根字体为该值
}
// 设置根字体大小，确保字体大小合理
document.documentElement.style.fontSize = fontSize + "px";
}
// 初始化时设置根字体大小
setRem();
// 窗口大小变化时重新计算
window.addEventListener("resize", setRem);
</script>2. 使用rem单位进行布局。
<template>
<div>
<div class="desc">使用rem单位，来控制界面缩放，设计稿吃错为1920，适配最小屏幕宽度为1024px</div>
</div>
</template>
<style scoped>
.desc {
font-size: 1rem;
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。