在响应式页面开发中，固定像素的字体和间距在不同屏幕尺寸下容易出现显示不协调的问题，而css的rem单位可以基于根元素的字体大小进行相对计算，能够很好地实现字体与间距的统一适配。rem的全称是root em，它的大小由html根元素的font-size属性决定，当根元素字体大小变化时，所有使用rem作为单位的样式都会同步按比例调整。
rem单位的基本使用规则
rem的取值计算方式为：当前rem值 = 设置的rem数值 * 根元素font-size大小。比如根元素font-size设置为16px，那么1rem就等于16px，2rem等于32px，以此类推。我们可以通过修改根元素的font-size，让所有使用rem的样式自动适配不同屏幕。
设置根元素字体大小
通常我们会根据屏幕宽度动态计算根元素的font-size，常见的方式是通过js监听屏幕宽度变化来设置，也可以结合媒体查询做基础适配。以下是动态计算根元素字体大小的js示例：
// 设计稿宽度为750px，根元素字体大小基准为100px，即1rem=100px
function setRootFontSize() {
const designWidth = 750;
const baseFontSize = 100;
const currentWidth = document.documentElement.clientWidth;
// 计算当前屏幕下根元素的字体大小
const fontSize = (currentWidth / designWidth) * baseFontSize;
// 设置根元素字体大小，最小不小于12px避免字体过小
document.documentElement.style.fontSize = Math.max(fontSize, 12) + 'px';
}
// 初始执行一次
setRootFontSize();
// 监听窗口大小变化重新计算
window.addEventListener('resize', setRootFontSize);
用rem统一字体大小
设置好根元素字体大小后，就可以用rem来定义字体大小，不同屏幕下字体会自动按比例缩放。以下是字体样式的示例：
/* 根元素font-size为100px时，以下字体大小对应100px、32px、28px、24px */
.title {
font-size: 1rem;
}
.sub-title {
font-size: 0.32rem;
}
.text {
font-size: 0.28rem;
}
.small-text {
font-size: 0.24rem;
}
用rem统一间距
除了字体，页面的内外边距、元素宽高也可以使用rem单位，这样整个页面的间距会随屏幕同步缩放，保持布局比例一致。以下是间距相关的样式示例：
/* 统一容器内边距和外边距 */
.container {
padding: 0.2rem;
margin: 0 auto;
max-width: 7.5rem; /* 对应设计稿750px宽度 */
}
/* 列表项之间的间距 */
.list-item {
margin-bottom: 0.2rem;
padding: 0.15rem;
}
/* 按钮的内边距 */
.btn {
padding: 0.15rem 0.3rem;
font-size: 0.28rem;
}
rem适配的注意事项
- 根元素字体大小的基准值可以根据设计稿灵活调整，通常设计稿宽度除以10作为基准值会更方便计算，比如750px设计稿基准值设为75px，那么1rem=75px，设计稿上的75px直接写为1rem即可。
- 避免给根元素设置过小的字体大小，部分浏览器有最小字体限制，设置小于12px的font-size可能不会生效，影响rem计算准确性。
- 如果页面中部分元素不需要随屏幕缩放，可以单独使用px单位，不需要全部统一用rem。
- 如果使用媒体查询设置根元素字体大小，需要覆盖主流的屏幕宽度区间，避免极端尺寸下适配异常。
媒体查询静态适配示例
如果不想使用js动态计算，也可以通过媒体查询做静态的rem适配，适合对适配精度要求不高的场景：
/* 屏幕宽度小于375px时，根元素字体大小设为50px */
@media screen and (max-width: 375px) {
html {
font-size: 50px;
}
}
/* 屏幕宽度在375px到750px之间时，根元素字体大小设为100px */
@media screen and (min-width: 376px) and (max-width: 750px) {
html {
font-size: 100px;
}
}
/* 屏幕宽度大于750px时，根元素字体大小设为100px，避免过大 */
@media screen and (min-width: 751px) {
html {
font-size: 100px;
}
}
通过rem单位统一字体和间距，能够大幅减少多端适配的工作量，保证不同设备下页面的视觉一致性。实际开发中可以根据项目需求选择动态js计算或者静态媒体查询的方式，灵活调整根元素的字体大小基准，让适配效果更符合预期。