js rem

作者：昂首向前走，发布日期:2025-07-28 浏览:43

// 设置根元素字体大小为16px
html {
  font-size: 16px;
}

// 使用rem设置元素样式
body {
  font-size: 1rem; // 等于16px
  padding: 0.5rem; // 等于8px
}

// 根据屏幕宽度动态调整根元素字体大小
function setRemUnit() {
  const screenWidth = document.documentElement.clientWidth;
  const rem = screenWidth / 10; // 假设设计稿宽度为375px，那么1rem = 37.5px
  document.documentElement.style.fontSize = rem + 'px';
}

window.addEventListener('resize', setRemUnit);
setRemUnit(); // 初始化设置

解释说明

REM 单位：rem 是相对于根元素 (<html>) 的字体大小来计算的。默认情况下，浏览器的根元素字体大小是 16px，所以 1rem 就等于 16px。
动态调整 REM：通过 JavaScript 动态调整根元素的字体大小，可以实现响应式布局。这里我们根据屏幕宽度来调整根元素的字体大小，从而让页面在不同设备上都能保持一致的设计比例。
事件监听：使用 window.addEventListener('resize', setRemUnit) 来监听页面尺寸的变化，确保当用户调整窗口大小时，REM 单位能够及时更新。

上一篇：nodejs webpack

下一篇：js attr