前端字体自适应

[joker2026]

我想请教个问题，在做响应式页面的时候，字体的响应式要如何处理，才能最优。我现在使用过的几种办法

1 、直接 px 然后媒体查询，这个肯定不是最优，第一是代码太多，每个断点都得单独写代码，而且你不可能完全适配到的所有设备

2 、rem ，其实和 px 差不多，也是根据媒体查询不断的去调整根节点的字体大小，来达到 rem 的大小变化。问题同 1

3 、使用 vw ，这是我觉得最丝滑的效果，配合 postcss-px-to-viewport ，非常好。但是它存在一个问题就是他完全是按照屏幕大小比例在缩小，就会导致文字会非常小，难以观看，当然可以使用 clamp 去设置字体最小值，但是每一个字体大小都这样设置，不仅没有提高效率，反而降低。

所以综上所述，各位常用的最丝滑的响应式方案，尤其是针对字体，有哪些建议呢？ 感谢

[frank553000]

https://css-tricks.com/snippets/css/fluid-typography/
自己参考这个方案改的，用了很久，个人觉得是最适合自己的

[june4]

我听过最扯蛋的就是字体跟着整个页面等比缩放，不管屏幕大小看到的东西都 tm 完全一样，但可能变得傻大

[nomytwins]

我们在 pad 横屏上同样遇到这个问题了，目前无解中。移动端只有这个难搞定

[crocoBaby]

建议用 vw 这个比较现代化的方案，对于上面那些字体太大和太小的问题可以通过媒体查询做 h5 和 pad 两个端，基本上可以解决这个问题

[shadowyue]

老实说这个还挺麻烦的，目前我用的就是 rem 方案，根据屏幕尺寸做缩放。

根据屏幕尺寸做断点的方案工作量会更多一点。

[FFFFourwood]

这个我擅长
你可以想一下
如果是手机上 375px 宽 这个字用最小 12px 就 ok
如果是 1080 的 pc 显示器、大概 24px 就 ok
那就可以算下比例、
相当于一个二元一次方程 ax + b = y
假设字号是 y 、当前屏幕宽度是 x
375a + b = 12
1080a + b = 24

解最终是 y = 0.017x + 5.62

x 是宽度 所以 x=1.7vw + 5.6px

font-size: calc( 1.7vw + 5.6px )

基本大部分 case 写一次就够 或者 750/768/2k 按需再写一次媒体查询 基本就能覆盖 320px ～ 5k 所有设备分辨率覆盖了