前端字体自适应

[joker2026]

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

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

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

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

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

[lisongeee]

字体可以使用一套 css 主题变量吗？不同的地方用不同的变量，然后媒体查询更改变量值就行

[xxmym]

rem 更接近 vw ，极少数设备会因为非整数 px 有渲染问题。
要看你这个响应式指的是什么，只是单纯适配手机竖屏浏览的话只用 rem 或 vw 就可以。
横竖屏切换要考虑取短边，桌面移动响应就要加上媒体查询，不过这两种情况字号都好说，解决布局更重要

[facebook47]

所以用 css 通过不同分辨率去控制，随着布局改变

[codder]

用媒体查询，pc 设备和平板直接用 px ，到了手机确定一个合适的宽度设置好 vw ，其余尺寸就自动根据 vw 来适应了

[150530]

@codder pc 和平板字体大小使用 16px 转 rem ，手机端使用媒体查询设置 html 的文字大小为 vw ，是这样吗

[wu67]

你用 rem 为什么还要媒体查询?
就不能写 js 监听窗口大小 resize 然后节流设置 html 的 font-size 吗...

[yKXSkKoR8I1RcxaS]

不要用 vw 不要用 vw 不要用 vw
重要的事情说三遍，这是一种极为危险的单位。

建议使用 rem ，PC 、PAD 、MOBILE 分别设置不同的根节点大小。

[ColdBird]

移动端用 rem ，然后 font-size 跟 vw 做一个比例转换保证 1rem=10px 即可
pc 端通过媒体查询修改 px

[encro]

小程序解决的方案就是 rem 。
相信他就是当前最好的方案。

[encro]

@encro #9 小程序是 rpx ，我说错了。

[idealist]

@Seria 请教一下，为什么 vw 很危险呢？

[yKXSkKoR8I1RcxaS]

@idealist 因为是按宽度比例来计算的，容易不可控。

[shunia]

字体大小应该是断点式的缩放，而不是完全平滑的缩放。这是设计上的基础。

也就是说字体大小天然应该用媒体查询。基于这一点考虑，就可以知道 px 或者 rem 根本不重要。

为了使用方便可以使用 css 变量，根据设计系统需要，在根样式文件里预定义不同断点下的合适的字体尺寸，在应用的组件上选取不同的尺寸即可。某些例外的情况可以使用基础尺寸做 scale 。

[shunia]

另外也可以参考一些比较有名的设计类产品或者网站他们的样式实现方式，照搬一种也是可以的。不用自己费心去考虑这些，现成的东西太多。

设计类的比如 Adobe ，Figma 。产品类的比如 Github ，Reddit 。

[tsutomu]

其实 px 就是最优的，设计规范搞好就行，其实也不难，其他的不叫响应式布局。

[koor]

同意 13 楼 @shunia ，用大屏幕就是为了多看几行字，字体等比缩放就失去了意义

[7gugu]

用 rem 就好了，在移动端上如果要禁用大字模式，可以固定写死一个 root font-size 来重置字体大小

[wdking]

rem 就是最好的方案

[thinkershare]

@Seria VW/VH 当然有它的用处，部分项目是非常适合，因为我压根不关心屏幕的尺寸，从 14 寸到 200 寸都是同一个布局，屏幕尺寸越大，内容也就越到。

[lizy0329]

我听过最扯蛋的就是屏幕越大，字体不变，这样用户可以多看几行?! 貌似是阿里搞的

字体跟着整个页面等比缩放即可，如 @shunia 所说，需要再断点

目前 移动端 viewport 有这几种：
1. 直接扯大，使用 px
<meta name="viewport" content="width=750, user-scalable=no viewport-fit=cover">
2. 使用 rem ，再动态调整 root fontsize
3. 使用 vw

当然 rem/vw 都是 postcss 自动计算的，代码写 px 即可

[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 所有设备分辨率覆盖了