我想请教个问题，在做响应式页面的时候，字体的响应式要如何处理，才能最优。我现在使用过的几种办法
1 、直接 px 然后媒体查询，这个肯定不是最优，第一是代码太多，每个断点都得单独写代码，而且你不可能完全适配到的所有设备
2 、rem ，其实和 px 差不多，也是根据媒体查询不断的去调整根节点的字体大小，来达到 rem 的大小变化。问题同 1
3 、使用 vw ，这是我觉得最丝滑的效果，配合 postcss-px-to-viewport ，非常好。但是它存在一个问题就是他完全是按照屏幕大小比例在缩小，就会导致文字会非常小，难以观看，当然可以使用 clamp 去设置字体最小值，但是每一个字体大小都这样设置，不仅没有提高效率，反而降低。
所以综上所述，各位常用的最丝滑的响应式方案，尤其是针对字体，有哪些建议呢？ 感谢
26 条回复 • 2024-06-01 11:33:16 +08:00
 |
1
lisongeee 18 天前
字体可以使用一套 css 主题变量吗？不同的地方用不同的变量，然后媒体查询更改变量值就行
|
 |
2
xxmym 18 天前
rem 更接近 vw ，极少数设备会因为非整数 px 有渲染问题。
要看你这个响应式指的是什么，只是单纯适配手机竖屏浏览的话只用 rem 或 vw 就可以。 横竖屏切换要考虑取短边，桌面移动响应就要加上媒体查询，不过这两种情况字号都好说，解决布局更重要 |
 |
3
facebook47 18 天前 via Android
所以用 css 通过不同分辨率去控制，随着布局改变
|
 |
4
codder 18 天前
用媒体查询，pc 设备和平板直接用 px ，到了手机确定一个合适的宽度设置好 vw ，其余尺寸就自动根据 vw 来适应了
|
 |
6
wu67 18 天前
你用 rem 为什么还要媒体查询?
就不能写 js 监听窗口大小 resize 然后节流设置 html 的 font-size 吗... |
 |
7
Seria 18 天前
不要用 vw 不要用 vw 不要用 vw
重要的事情说三遍，这是一种极为危险的单位。 建议使用 rem ，PC 、PAD 、MOBILE 分别设置不同的根节点大小。 |
 |
8
ColdBird 18 天前
移动端用 rem ，然后 font-size 跟 vw 做一个比例转换保证 1rem=10px 即可
pc 端通过媒体查询修改 px |
 |
9
encro 18 天前
小程序解决的方案就是 rem 。
相信他就是当前最好的方案。 |
 |
13
shunia 18 天前  3
字体大小应该是断点式的缩放，而不是完全平滑的缩放。这是设计上的基础。
也就是说字体大小天然应该用媒体查询。基于这一点考虑，就可以知道 px 或者 rem 根本不重要。 为了使用方便可以使用 css 变量，根据设计系统需要，在根样式文件里预定义不同断点下的合适的字体尺寸，在应用的组件上选取不同的尺寸即可。某些例外的情况可以使用基础尺寸做 scale 。 |
|
14
shunia 18 天前 1
另外也可以参考一些比较有名的设计类产品或者网站他们的样式实现方式，照搬一种也是可以的。不用自己费心去考虑这些，现成的东西太多。
设计类的比如 Adobe ，Figma 。产品类的比如 Github ，Reddit 。 |
 |
15
tsutomu 18 天前 via Android
其实 px 就是最优的，设计规范搞好就行，其实也不难，其他的不叫响应式布局。
|
 |
17
7gugu 18 天前
用 rem 就好了，在移动端上如果要禁用大字模式，可以固定写死一个 root font-size 来重置字体大小
|
 |
18
wdking 18 天前
rem 就是最好的方案
|
 |
19
thinkershare 18 天前
@Seria VW/VH 当然有它的用处，部分项目是非常适合，因为我压根不关心屏幕的尺寸，从 14 寸到 200 寸都是同一个布局，屏幕尺寸越大，内容也就越到。
|
 |
20
lizy0329 18 天前
我听过最扯蛋的就是屏幕越大，字体不变，这样用户可以多看几行?! 貌似是阿里搞的
字体跟着整个页面等比缩放即可，如 @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 即可 |
 |
21
frank553000 18 天前
https://css-tricks.com/snippets/css/fluid-typography/
自己参考这个方案改的，用了很久，个人觉得是最适合自己的 |
 |
22
june4 18 天前 1
我听过最扯蛋的就是字体跟着整个页面等比缩放，不管屏幕大小看到的东西都 tm 完全一样，但可能变得傻大
|
 |
23
nomytwins 18 天前
我们在 pad 横屏上同样遇到这个问题了，目前无解中。移动端只有这个难搞定
|
 |
24
crocoBaby 18 天前 via iPhone
建议用 vw 这个比较现代化的方案，对于上面那些字体太大和太小的问题可以通过媒体查询做 h5 和 pad 两个端，基本上可以解决这个问题
|
 |
25
shadowyue 18 天前
老实说这个还挺麻烦的，目前我用的就是 rem 方案，根据屏幕尺寸做缩放。
根据屏幕尺寸做断点的方案工作量会更多一点。 |
 |
26
FFFFourwood 17 天前
这个我擅长
你可以想一下 如果是手机上 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 所有设备分辨率覆盖了 |
Select Language