个人网站栏目,猎头网招聘,基础建设期刊,个人定做衣服店前言: 最近导师布置了一些作业#xff0c;其中有一个就是动态计算rem#xff0c;我想到了两个版本#xff0c;一种是不添加防抖#xff0c;当视口发生变化时#xff0c;就立即进行计算rem#xff0c;还是一种就是使用防抖#xff0c;当视口连续100毫秒没有发生变化时计…前言: 最近导师布置了一些作业其中有一个就是动态计算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)