js实现rem

最新推荐文章于 2023-08-21 14:59:23 发布

ATWLee

最新推荐文章于 2023-08-21 14:59:23 发布

阅读量448

点赞数

分类专栏： JS CSS 文章标签： javascript 前端

本文链接：https://blog.csdn.net/bwater_monster/article/details/130968410

版权

JS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用JavaScript监听窗口尺寸变化，动态计算并设置HTML根元素的font-size，以基于设计稿宽度实现rem的动态适配。当窗口宽度大于1440px时，保证在设计稿分辨率（1920px）下0.1rem等于10px，从而实现不同屏幕尺寸下的响应式布局。

摘要由CSDN通过智能技术生成

JS实现动态修改rem根节点

原理：监听窗口改变，动态修改根节点（html标签）的font-size

const DESIGN_WIDTH = 1920; // 设计稿大小
function setHtmlFontsize() {
  const docEl = document.documentElement;
  const w = window.innerWidth;
  if (w <= 1440) return; // 下限
  docEl.style.fontSize = ((w / DESIGN_WIDTH) * 100).toFixed(3) + 'px';
}
setHtmlFontsize();
window.addEventListener('resize', setHtmlFontsize);