在网页开发中，调整html文字大小是基础需求，同时还需要保证文字在不同尺寸的手机、平板、电脑等设备上显示效果一致，这就需要使用合适的单位和方法来实现。rem作为相对单位，基于html根元素的字体大小计算，非常适合用来做多端文字适配。
html文字大小的基础调整方式
最基础的调整html文字大小的方式是使用css的font-size属性，常见的单位有px、em、rem等。
px单位调整
px是绝对单位，设置后文字大小固定，不会随设备变化，适合不需要适配的场景。示例代码如下：
/* 设置段落文字大小为16px */
p {
font-size: 16px;
}
em单位调整
em是相对单位，相对于父元素的字体大小计算，多层嵌套时容易出现计算复杂的问题，示例代码如下：
/* 父元素字体大小为16px，子元素1em就是16px，2em就是32px */
.parent {
font-size: 16px;
}
.child {
font-size: 2em; /* 实际大小为32px */
}
使用rem调整html文字大小适配多端
rem是相对于html根元素的字体大小的单位，默认情况下html根元素的字体大小是16px，所以1rem默认等于16px。我们可以通过动态设置根元素的字体大小，让rem对应的实际像素值随设备宽度变化，从而实现多端适配。
设置根元素字体大小
通常我们会根据设备的宽度来计算html根元素的字体大小，常见的做法是把设计稿的宽度分成10份或者20份，对应的根字体大小就是设备宽度除以份数。示例代码如下：
// 设置根元素字体大小的函数
function setRootFontSize() {
// 获取当前设备宽度
const clientWidth = document.documentElement.clientWidth || window.innerWidth;
// 假设设计稿宽度为750px，分成10份，每份75px，对应1rem=75px
const baseWidth = 750;
const baseFontSize = 75;
// 计算当前设备对应的根字体大小
const currentFontSize = (clientWidth / baseWidth) * baseFontSize;
// 设置html根元素的字体大小，限制最小和最大值避免极端情况
const finalFontSize = Math.max(30, Math.min(currentFontSize, 100));
document.documentElement.style.fontSize = finalFontSize + 'px';
}
// 页面加载时执行一次
setRootFontSize();
// 窗口大小变化时重新计算
window.addEventListener('resize', setRootFontSize);
使用rem设置文字大小
根字体大小设置完成后，就可以用rem单位来设置文字大小了，所有使用rem的文字都会根据根字体大小自动缩放。示例代码如下：
/* 根字体大小为75px时，0.32rem就是24px，0.4rem就是30px */
.title {
font-size: 0.4rem; /* 适配后对应30px */
font-weight: bold;
}
.content {
font-size: 0.32rem; /* 适配后对应24px */
line-height: 1.5;
}
适配不同场景的技巧
- 对于不需要缩放的固定大小文字，可以继续使用px单位，避免不必要的计算
- 可以在css中设置最小和最大字体大小，避免小屏幕下文字过小或者大屏幕下文字过大，示例：
font-size: clamp(14px, 0.32rem, 20px); - 如果项目使用了构建工具，可以通过postcss插件自动把px转换成rem，减少手动计算的工作量
常见问题说明
有些开发者会疑惑为什么设置了rem之后文字大小没有变化，通常是没有正确设置html根元素的字体大小，或者根字体大小的设置逻辑有问题。另外要注意，rem只相对于html根元素的字体大小，和父元素的字体大小无关，这一点和em单位有本质区别。
使用rem调整html文字大小适配多端的方法，兼容性很好，几乎所有现代浏览器都支持，只要正确设置根字体大小的计算逻辑，就能轻松实现不同设备下文字的适配显示。