Vue3中如何使用rem来控制字体大小问题
作者：KyleZhou_
这篇文章主要介绍了Vue3中如何使用rem来控制字体大小问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3使用rem控制字体大小
方法一
需要在index.html中写入监听事件
【注】：获取html、body是有特定的方法的
<script>
let tid = null;
function resizeWindow() {
const docEl = document.documentElement;
//当前页面的长度
const HtmlDom = docEl.getBoundingClientRect().width;
//设置rem
docEl.style.fontSize = HtmlDom / 192 + "px";
}
window.addEventListener("resize", () => {
this.clearTimeout(tid);
tid = this.setTimeout(resizeWindow, 300);
});
resizeWindow();
</script>记录vue使用rem实现页面动态响应
rem适配介绍
根据 W3C 规范中对 1rem 的定义：
1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。
这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）
兼容性
- ios：6.1系统以上都支持
- android：2.1系统以上都支持
大部分主流浏览器都支持，可以安心的往下看了
rem：（font size of the root element）
意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的根元素（html）来设置字体大小的，举一个简单的例子，
现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px。
举个例子：
//假设我给根元素的大小设置为16px
html{
font-size：16px
}
//那么我底下的p标签如果想要也是16像素
p{
font-size:1rem
}
//如此即可实际操作
1. 创建rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变浏览器窗口大小时重新设置 rem
window.onresize = function() {
setRem();
};2.在main.js引入rem.js
import './libs/rem.js'
3.页面使用
页面布局尽量是用百分比，其他所有配置尽量是rem，尤其是字体大小
<div id="div1">我是一个div标签</div>
#div1{
// width:100%;
font-size: 1rem;
width: 16rem;
height: 2rem;
background-color: lawngreen;
}这样当页面改变时div里面的文字也会跟着变。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。