React项目根字体大小异常求助：1rem为何未显示为10px？

问题本质：浏览器的最小字体限制 #

• 几乎所有主流浏览器都有默认的最小字体大小规则（一般是12px），只要元素计算出来的字体尺寸低于这个值，浏览器就会强制把它改成最小字体，避免过小的文字影响可读性。
• 你给根元素（<html>）设了font-size: 62.5%，按浏览器默认的16px基础字体计算，根字体本该是16*0.625=10px，但10px低于12px的最小限制，所以浏览器直接把根字体的显示值提升到12px，1rem自然就跟着变成12px。
• 至于2rem显示20px，是因为10px*2=20px，这个尺寸超过了12px的限制，浏览器不会干预，就按计算值正常渲染。
• 你直接给div设10px也显示12px，也是同一个逻辑——10px触碰到了浏览器的最小字体阈值，被强制放大了。

验证与解决思路 #

• 可以去浏览器设置里把最小字体改成10px，这时候1rem就会显示成10px，能直接验证这个机制的存在。
• 要是非得实现1rem=10px的适配，也可以直接把根字体设成10px，但这种方式会影响用户自行调整字体大小的体验，更稳妥的是用CSS变量结合百分比，既保留适配性又兼顾可读性。

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