本文主要是介绍动态计算rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言:
最近导师布置了一些作业，其中有一个就是动态计算rem，我想到了两个版本，一种是不添加防抖，当视口发生变化时，就立即进行计算rem，还是一种就是使用防抖，当视口连续100毫秒没有发生变化时计算rem
rem实现适配的原理
核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。
实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。
表达式为rem = width / n。rem大小始终为width的n等分。
不进行防抖：
/*** 动态计算rem，视口变化，立即进行计算*/
const changeRem = ()=>{
//获取当前视口(<html>标签)宽度
let width = document.documentElement.clientWidth;
// 设置根元素字体大小，此时为宽的16等分
document.documentElement.style.fontSize = width / 16 + 'px';
}
// 首次加载应用，设置一次
changeRem()
//监听视口变化，视口变化执行回调函数
window.addEventListener('resize',changeRem)使用防抖：
/*** 动态计算rem，使用防抖，窗口100毫秒没有变化，执行计算*/
let timeOut = null;
const changeRem = ()=>{clearTimeout(timeOut);//100 毫秒内如果没有新的 resize 事件，则执行计算操作timeOut = setTimeout(()=>{// 设置根元素字体大小，此时为宽的16等分let width = document.documentElement.clientWidth;//设置根元素字体大小。此时为宽的10等分document.documentElement.style.fontSize = width / 16 + 'px';},100)
}
//首次加载应用，设置一次
changeRem()
//监听视口变化，视口变化执行回调函数
window.addEventListener('resize',changeRem)
这篇关于动态计算rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
