rem适配原理

什么是 rem？

rem = root em = 相对于根元素（html）字体大小的单位

/* 核心定义 */
html {
    font-size: 16px;  /* 设置根字体大小 */
}

/* 此时 */
1rem = 16px
2rem = 32px
0.5rem = 8px

关键点：rem 本身只是一个 CSS 单位，它不会自动适配屏幕

计算机制：

// rem 的最终渲染公式
实际px值 = rem值 × html元素的font-size值

// 例子
html { font-size: 20px; }
.box { width: 10rem; }  
// 浏览器计算: 10 × 20 = 200px
// 最终渲染: 200px

与 em 的区别

<style>
/* em - 相对于父元素 */
.parent {
    font-size: 20px;  /* 父级 */
}
.child-em {
    font-size: 1.5em;  /* 30px (相对于父级20px) */
    padding: 1em;      /* 30px (相对于自身font-size) */
}

/* rem - 相对于根元素 */
html {
    font-size: 16px;   /* 根元素 */
}
.child-rem {
    font-size: 1.5rem; /* 24px (相对于html) */
    padding: 1rem;     /* 16px (始终相对于html) */
}
</style>

rem 适配屏幕的原理

改变 html 的 font-size，所有使用 rem 的元素等比例缩放

// 1. 初始状态
html { font-size: 16px; }
.box { width: 10rem; }  // 160px

// 2. 改变根字体
html { font-size: 32px; }
.box { width: 10rem; }  // 320px (自动变大)

// 3. 等比例缩放的核心
// 所有rem元素都会随着根字体变化而等比变化

实际适配逻辑：

/* 一行代码解决适配 */
html {
    /* 公式: 屏幕宽度 / 设计稿宽度 * 基准值 */
    /* 375px设计稿, 1rem = 10px(便于计算) */
    font-size: calc(100vw / 37.5);
}

使用插件或者手写px转rem逻辑：

// 方案2：SCSS 函数手动转换
@function rem($px) {
    @return $px / 10 * 1rem;
}

.button {
    width: rem(300);
    height: rem(44);
    font-size: rem(16);
}

关键点：

rem 本身不自动适配，需要配合动态设置 html根元素 font-size

限制范围，避免极端屏幕下字体过大或过小

html {
    /* clamp(最小值, 理想值, 最大值) */
    font-size: clamp(12px, calc(100vw / 37.5), 20px);
}

边框建议保持 1px，不要等比例缩放