Rem是css中相对长度单位，它的大小由根元素也就是html元素的font-size属性决定，1rem等于html元素的font-size值。使用Rem布局实现自适应，核心思路就是把页面所有的尺寸单位都换成rem，再通过调整根元素的字体大小来适配不同屏幕宽度。
Rem布局的核心原理
Rem单位的计算规则非常清晰，假设我们设置html的font-size为16px，那么1rem就等于16px，2rem就是32px，以此类推。当我们需要适配不同屏幕时，只需要根据屏幕宽度动态修改html的font-size值，页面中所有使用rem作为单位的元素尺寸就会自动跟着变化，从而实现自适应效果。
两种常见的Rem布局实现方式
方式一：使用媒体查询设置根字体大小
媒体查询可以根据不同的屏幕宽度范围设置对应的html字体大小，这种方式适合屏幕尺寸范围比较明确的项目，实现起来比较简单。
首先我们需要先确定一个基准设计稿宽度，通常移动端设计稿宽度是750px，我们假设设计稿中根字体大小设置为75px，也就是1rem等于75px，那么设计稿中750px的宽度就对应10rem。
接下来编写媒体查询代码，针对不同屏幕宽度设置对应的font-size：
/* 基准设置，适配750px宽度的设计稿 */
html {
font-size: 75px;
}
/* 屏幕宽度小于750px时，按宽度比例缩小根字体大小 */
@media screen and (max-width: 750px) {
html {
font-size: 10vw;
}
}
/* 屏幕宽度大于750px时，固定根字体大小 */
@media screen and (min-width: 750px) {
html {
font-size: 75px;
}
}
上面的代码中，10vw表示屏幕宽度的10%，当屏幕宽度是750px时，10vw就是75px，和设计稿的基准值一致。如果屏幕宽度是375px，10vw就是37.5px，此时1rem等于37.5px，设计稿中原本75px的元素就会变成2rem，实际渲染就是75px，刚好适配375px的屏幕。
方式二：使用JS动态计算根字体大小
媒体查询的方式只能覆盖预设的屏幕宽度范围，而JS动态计算可以适配任意宽度的屏幕，适配精度更高，是目前更常用的实现方式。
实现逻辑是：先获取当前屏幕的宽度，然后根据设计稿的宽度和预设的根字体大小，按比例计算出当前屏幕对应的根字体大小，再赋值给html元素。
假设设计稿宽度是750px，我们预设设计稿下根字体大小为75px，那么计算公式为：当前根字体大小 = 屏幕宽度 / 设计稿宽度 * 预设根字体大小。
完整的JS代码如下：
// 设计稿宽度
const designWidth = 750;
// 设计稿下对应的根字体大小，1rem = 75px
const baseFontSize = 75;
function setRem() {
// 获取当前屏幕宽度
const screenWidth = document.documentElement.clientWidth || window.innerWidth;
// 计算当前根字体大小
const currentFontSize = screenWidth / designWidth * baseFontSize;
// 设置html的font-size，限制最大为75px，避免大屏幕下元素过大
document.documentElement.style.fontSize = Math.min(currentFontSize, baseFontSize) + 'px';
}
// 页面加载时执行一次
setRem();
// 窗口大小变化时重新计算
window.addEventListener('resize', setRem);
// 页面回退时重新计算
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
setRem();
}
});
把这段代码放在页面的head标签中，在css加载之前执行，就可以保证页面渲染时已经计算好了根字体大小，避免页面闪烁。
Rem布局的使用示例
假设设计稿中有一个宽度为750px，高度为200px的红色容器，内部有一个字体大小为32px的标题，我们把它转换成rem单位的实现如下：
/* 容器样式，750px对应10rem，200px对应200/75≈2.6667rem */
.container {
width: 10rem;
height: 2.6667rem;
background-color: #ff4444;
margin: 0 auto;
}
/* 标题样式，32px对应32/75≈0.4267rem */
.title {
font-size: 0.4267rem;
color: #ffffff;
text-align: center;
line-height: 2.6667rem;
}
对应的html结构如下：
<div class="container">
<div class="title">Rem布局自适应示例</div>
</div>
当屏幕宽度是750px时，根字体大小是75px，容器宽度就是10*75=750px，标题字体大小是0.4267*75≈32px，和设计稿一致。当屏幕宽度是375px时，根字体大小是37.5px，容器宽度就是10*37.5=375px，标题字体大小是0.4267*37.5≈16px，刚好适配小屏幕。
Rem布局的注意事项
- 不要给html元素设置固定的max-width或者min-width，避免影响根字体大小的计算。
- 如果页面中需要适配PC端和移动端，建议给根字体大小设置最大值，避免大屏幕下元素过大影响体验。
- 行内元素或者需要固定尺寸的小图标，也可以根据需求使用px单位，不需要全部强制换成rem。
- 如果使用postcss-pxtorem等工具自动转换px为rem，需要确认工具的配置和设计稿的基准值一致，避免转换后的尺寸出错。
Rem布局是目前移动端自适应最常用的方案之一，配合flex布局可以解决绝大多数页面适配问题，开发者可以根据项目需求选择合适的实现方式。