rem（root em）本身并不是一个直接实现自适应布局的工具，而是一个相对单位。它实现自适应布局的核心在于动态修改根元素（html）的字体大小。 通过根据视口宽度或高度动态调整html的font-size，进而影响所有使用rem单位的元素的大小，最终达到自适应布局的效果。
以下是具体的实现步骤和原理：
-
设置根元素字体大小： 在CSS中设置
html的font-size。这个值可以是一个固定值，但为了实现自适应，通常会使用JavaScript动态计算。 -
使用rem单位： 在需要自适应的元素上使用
rem单位定义尺寸。例如：width: 10rem;表示该元素的宽度是根元素字体大小的10倍。 -
动态计算根元素字体大小： 使用JavaScript监听窗口大小变化事件（
resize），并在事件处理函数中根据当前视口宽度或高度计算新的font-size值，并将其应用于html元素。
示例代码 (JavaScript):
function setRem() {
// 获取视口宽度
const viewportWidth = window.innerWidth;
// 设计稿宽度 (例如设计稿宽度为750px)
const designWidth = 750;
// 计算根元素字体大小
const fontSize = (viewportWidth / designWidth) * 100; // 100px是设计稿中html的font-size
// 设置根元素字体大小
document.documentElement.style.fontSize = fontSize + 'px';
}
// 初始设置
setRem();
// 监听窗口大小变化
window.addEventListener('resize', setRem);
原理：
这段代码的核心在于根据视口宽度与设计稿宽度的比例，动态计算html的font-size。例如，如果设计稿宽度为750px，html的font-size为100px，那么当视口宽度为375px时，font-size会被设置为50px。所有使用rem单位的元素的尺寸都会相应地缩小一半，从而适应不同的屏幕尺寸。
优点：
- 易于维护： 只需要修改
html的font-size就可以调整整个页面的布局比例。 - 兼容性好：
rem单位得到广泛支持。 - 实现简单： 代码简洁易懂。
缺点：
- 依赖JavaScript： 需要JavaScript代码动态计算和设置
font-size。如果JavaScript被禁用，布局可能会出现问题。 可以使用CSS的calc()配合vw单位来部分规避这个问题，但兼容性不如rem方案好。 - 字体大小影响布局： 所有使用
rem单位的元素都依赖于根元素的字体大小，如果其他地方修改了根元素的字体大小，可能会影响到布局。
总结：
rem配合JavaScript动态修改根元素字体大小是一种常用的自适应布局方案，其简单易用且兼容性好，但在使用时需要注意JavaScript依赖和字体大小的影响。 根据项目需求和团队技术栈，可以选择合适的方案。