动态计算rem

gurenchang

已于 2024-05-27 15:30:36 修改

阅读量222

点赞数 2

文章标签：前端 javascript html

于 2024-05-25 17:52:35 首次发布

本文链接：https://blog.csdn.net/gurenchang/article/details/139200792

版权

前言:

最近导师布置了一些作业，其中有一个就是动态计算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(()=>{
//获取当前视口(<html>标签)宽度
  let width = document.documentElement.clientWidth;
 //设置根元素字体大小。此时为宽的16等分
  document.documentElement.style.fontSize = width / 16 + 'px';
  },100)
}
//首次加载应用，设置一次
changeRem()
//监听视口变化，视口变化执行回调函数
window.addEventListener('resize',changeRem)