需要一段JS：
(function (doc) {
let docEl = doc.documentElement; // 获取根节点的html
doc.addEventListener("DOMContentLoaded", recalc);
function recalc() {
let width = docEl.clientWidth;
docEl.style.fontSize = 20 * (width / 320) + "px";
}
})(document);
解释：
-
使用IIFE（立即执行函数表达式）来封装整个功能，确保变量不会污染全局作用域。
-
获取文档的
<html>元素，存储在docEl变量中。 -
添加一个事件监听器，监听
DOMContentLoaded事件，当DOM加载完成时调用recalc函数。 -
在
recalc函数中：
- 获取
<html>元素的可视宽度（不包括滚动条），存储在width变量中。 - 根据
width计算新的字体大小。这里使用了一个公式20 * (width / 320)，意味着当宽度为320px时，根元素的字体大小为20px；宽度增加时，字体大小按比例增加。 - 将计算出的字体大小设置为
<html>元素的style.fontSize属性，单位为px。 -
最后，将
document对象作为参数传入IIFE，使内部函数可以访问到文档对象。
完整例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.app{
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<div class="app">app</div>
<script>
(function (doc) {
let docEl = doc.documentElement; // 获取根节点的html
doc.addEventListener("DOMContentLoaded", recalc);
function recalc() {
let width = docEl.clientWidth;
docEl.style.fontSize = 20 * (width / 320) + "px";
}
})(document);
</script>
</body>
</html>
标签：字体大小,recalc,适配,width,doc,let,rem,docEl,页面 From： https://www.cnblogs.com/llcdbk/p/18491900