在响应式页面开发中，使用固定px单位设置字体大小会导致不同屏幕尺寸下字号差异过大，大屏上文字过小、小屏上文字过大，影响用户阅读体验。要解决这个问题，最常用的方案是利用rem单位实现字号自适应，rem是相对于根元素html字体大小的单位，只要动态调整根元素的字体大小，就能让所有使用rem定义的字号跟随变化。
rem单位的基础原理
rem的全称是root em，它的大小由html元素的font-size属性决定。默认情况下，浏览器的html根元素字体大小是16px，此时1rem就等于16px。如果我们把html的font-size设置为20px，那么1rem就会变成20px，页面中所有使用rem作为单位的字号都会按比例放大。
动态设置根元素字体大小的方案
要实现不同屏幕尺寸下的根元素字体大小动态调整，最常用的方式是通过JavaScript监听屏幕宽度变化，计算对应的根元素字号，也可以使用css的媒体查询做分段适配。
JavaScript动态计算方案
我们可以根据设计稿的宽度和基准字号，计算当前屏幕宽度下对应的根元素字体大小，同时监听窗口resize事件保证屏幕尺寸变化时实时更新。
// 设计稿宽度，假设设计稿是750px，基准根字号是16px
const designWidth = 750;
const baseRootFontSize = 16;
function setRootFontSize() {
// 获取当前屏幕宽度
const currentWidth = document.documentElement.clientWidth;
// 计算当前根字号，按比例缩放
const currentRootFontSize = (currentWidth / designWidth) * baseRootFontSize;
// 设置html的font-size
document.documentElement.style.fontSize = currentRootFontSize + 'px';
}
// 初始执行一次
setRootFontSize();
// 监听窗口大小变化
window.addEventListener('resize', setRootFontSize);
CSS媒体查询分段适配方案
如果不想使用JavaScript，也可以通过css媒体查询针对不同屏幕宽度范围设置对应的根元素字体大小，适合适配范围比较固定的场景。
/* 屏幕宽度小于375px时，根字号设为14px */
@media screen and (max-width: 375px) {
html {
font-size: 14px;
}
}
/* 屏幕宽度在375px到768px之间，根字号设为16px */
@media screen and (min-width: 376px) and (max-width: 768px) {
html {
font-size: 16px;
}
}
/* 屏幕宽度大于768px时，根字号设为18px */
@media screen and (min-width: 769px) {
html {
font-size: 18px;
}
}
使用rem设置字号实现自适应
根元素字体大小设置完成后，我们就可以把原本的px字号替换为rem单位，替换时只需要用原来的px值除以基准根字号即可。
比如原本设计稿上某个标题的字号是32px，基准根字号是16px，那么对应的rem值就是32 / 16 = 2rem，在不同屏幕下这个标题的字号会自动跟随根字号变化。
/* 原本的px写法 */
.title-old {
font-size: 32px;
}
/* 替换为rem写法，32px / 16px = 2rem */
.title {
font-size: 2rem;
}
/* 正文文字，原本16px，对应1rem */
.text {
font-size: 1rem;
line-height: 1.5rem;
}
注意事项
- 不要给html根元素设置固定px的font-size，否则rem单位会失去自适应能力。
- 如果页面中需要保留部分固定大小的字体，可以继续使用px单位，不需要全部替换为rem。
- 使用JavaScript动态计算方案时，要注意避免根字号过小或过大，可以设置最小和最大值限制，比如最小不小于12px，最大不超过20px。
- 如果项目中使用了第三方组件库，要确认组件库的字号是否也使用了rem单位，避免适配冲突。
rem适配不仅可以用在字号上，也可以用在宽度、高度、边距等属性上，实现整个页面的按比例缩放，是响应式开发中非常实用的方案。