rem是如何实现自适应布局的？

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依赖和字体大小的影响。根据项目需求和团队技术栈，可以选择合适的方案。