我最近一直在用这个字号适配方案，亲测效果很不错，分享给大家：

h5 { 
  font-size: calc(1rem + .25vmin); 
}

方案原理 #

这个计算式的逻辑很清晰：

• 1rem 作为标题的最小字号基准，保证在小屏设备上文字不会过小，可读性拉满
• .25vmin 是动态适配部分，vmin会取当前视口宽高中较小值的1%，所以不管是横屏还是竖屏，标题都会跟着视口的最小边适度放大，完美适配各种设备尺寸

兼容性表现 #

我在多个浏览器和设备上测试过，这个方案兼容IE10及以上版本，Chrome、Firefox、Safari这些主流浏览器也都能完美支持，大部分常规场景下适配都没毛病。

需要注意的坑 #

不过要提醒大家，在特定屏幕分辨率下可能会出现字体显示异常的情况（比如字号跳变、渲染比例不协调）。如果你的项目里用的是HKGrot这类字体，还要额外注意：这类字体的字重、字间距在缩放时的渲染细节可能会放大适配问题，遇到异常时可以优先排查字体本身的渲染表现。

优化小技巧 #

如果遇到异常情况，可以试试这些调整方向：

• 微调vmin的系数，比如改成0.2vmin，缩小动态变化的幅度，减少极端分辨率下的适配问题
• 给字号加个上限，比如写成 min(calc(1rem + .25vmin), 1.5rem)，避免超大屏上标题字号过大突兀
• 测试时多覆盖边缘场景，比如折叠屏、超宽屏这类特殊分辨率设备

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