理解CSS单位rem：常规字号与rem设置的差异

核心差异在于尺寸参考基准不同，下面结合你在div中设置0.85rem的场景逐一对比：

1. 固定单位（px） #

直接写font-size: 14px;（近似0.85rem在默认根字体16px下的大小），这是固定像素值：

• 优势：尺寸精准，不会受其他元素或用户设置影响
• 劣势：用户调整浏览器/系统默认字体大小时，文本无法同步适配，对无障碍体验不友好

2. 相对父元素单位（em） #

写font-size: 0.85em;时，尺寸基于父元素的字体大小计算：

• 比如父元素font-size为20px，div的字体就是20px × 0.85 = 17px
• 问题：嵌套场景下会出现连锁继承，比如子元素再用em，会基于当前div的字体大小计算，容易导致尺寸失控

3. rem单位（相对根元素） #

font-size: 0.85rem;的尺寸基于**HTML根元素（<html>）**的字体大小计算：

• 默认根元素font-size为16px，所以div字体是16px × 0.85 = 13.6px
• 优势：不管div嵌套多少层，始终以根元素为基准，不会出现em的连锁问题；用户调整浏览器默认字体大小时，文本会自动适配，无障碍体验更好
• 现代响应式设计中，常配合媒体查询动态修改根元素font-size，实现全页面的适配缩放

代码示例 #

/* 默认根字体16px */
html { font-size: 16px; }

/* 固定px设置 */
.div-px { font-size: 14px; }

/* em依赖父元素 */
.parent { font-size: 20px; }
.div-em { font-size: 0.85em; /* 20×0.85=17px */ }

/* rem依赖根元素 */
.div-rem { font-size: 0.85rem; /* 16×0.85=13.6px */ }

场景选择 #

• 需固定尺寸、不考虑用户字体调整时用px
• 需局部基于父元素适配时用em（注意嵌套风险）
• 全局适配、优先无障碍体验时用rem（推荐用于现代网页设计）

内容的提问来源于stack exchange，提问作者LearnProgramming_0985