js：rem单位中所需的js

大佬，咋整啊

已于 2024-07-30 14:40:00 修改

阅读量192

点赞数

分类专栏： JavaScript 文章标签： javascript js

于 2020-10-16 16:18:51 首次发布

本文链接：https://blog.csdn.net/weixin_41981909/article/details/109116963

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

先说下实现思路吧：
rem 是根据根元素的字号进行调整，所以可以先获取浏览器可视区域的宽度作为参照，将该宽度数值分为N 等份，每份或每份的倍数定义为根元素的字号，再监听这样一个rem 单位的js 就写好了

这段代码中1rem 最大为20px：

function reFontsize () {
  const html = document.querySelector("html")
  let pageWidth = document.body.clientWidth
  const maxW = 750;const minW = 375;
  pageWidth > maxW ? pageWidth = maxW : ''
  const ratio = pageWidth / minW;
  html.style.fontSize = 10 * ratio + "px";//根元素的
}
window.onload = function() {
  reFontsize()
}
window.addEventListener("resize",reFontsize)