js实现rem
使用 JavaScript 动态计算 rem
在移动端开发中，rem 是一种相对单位，基于根元素（html）的字体大小。通过 JavaScript 动态设置根元素的字体大小，可以实现页面在不同设备上的自适应布局。
function setRemUnit() {
const docEl = document.documentElement;
const width = docEl.clientWidth;
const rem = width / 10; // 将屏幕宽度分为 10 份，1rem = 屏幕宽度的 1/10
docEl.style.fontSize = rem + 'px';
}
// 初始化
setRemUnit();
// 监听窗口变化
window.addEventListener('resize', setRemUnit);结合 CSS 使用 rem
在 CSS 中，可以使用 rem 单位来定义元素的尺寸、边距等属性。由于根字体大小已通过 JavaScript 动态设置，所有使用 rem 的元素将自动适应不同屏幕尺寸。
.container {
width: 10rem; /* 10rem = 屏幕宽度 */
padding: 0.5rem;
font-size: 0.32rem;
}处理高分辨率屏幕
对于高分辨率屏幕（如 Retina 显示屏），可以结合 window.devicePixelRatio 调整 rem 的计算方式，确保显示效果更精细。
function setRemUnit() {
const docEl = document.documentElement;
const width = docEl.clientWidth;
const dpr = window.devicePixelRatio || 1;
const rem = (width * dpr) / 10;
docEl.style.fontSize = rem + 'px';
}兼容性处理
为了确保代码在旧版本浏览器中正常运行，可以添加 DOM 加载完成的监听事件，并在页面加载时立即执行设置。
document.addEventListener('DOMContentLoaded', setRemUnit);
window.addEventListener('load', setRemUnit);使用媒体查询作为备用方案
尽管 JavaScript 可以实现动态调整，但在某些情况下（如 JavaScript 禁用时），可以通过 CSS 媒体查询设置一个默认的根字体大小。
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
font-size: 32px;
}
}注意事项
- 避免在 JavaScript 中频繁触发
resize事件，可以通过防抖（debounce）函数优化性能。 - 在设计与开发过程中，建议使用固定的设计稿尺寸（如 750px），并通过比例计算 rem 值。
- 测试时需覆盖不同分辨率的设备，确保布局效果符合预期。
