响应式设计的字体大小[关闭]答案

【问题标题】：Font sizes for responsive design [closed]响应式设计的字体大小[关闭]
【发布时间】：2013-03-08 06:11:48
【问题描述】：

在不同视口大小之间调整字体大小的明智策略是什么？我看到了三种不同的可能选项：

什么是最好的选择，为什么？

【问题讨论】：

你用的是px还是em？处理字体时最好使用 em。
这肯定取决于相关网站吗？信息量大的网站将受益于保持字体大小固定，而文字信息较少的网站可能会在视口减小时更好地增加字体大小。
保持不变并使用 PX。让设备计算其特定的屏幕密度。这样，桌面上的 12px 是移动设备上的 12px 等。无论如何它都会看起来不错。我在这里使用该技术...mhostiuckproductions.com/siteLSSBoilerPlate
@evilscary，问题不在于特定站点，而更多地在于每种策略的优缺点。例如，我看到很多响应式网站会随着视口的减小而增大字体大小，我不明白为什么......
@Lowkase，正如我在之前的评论中所说，问题不是关于特定网站，而是说我正在使用 em。

【解决方案1】：

这是一个开放式问题 - 因为实际上，它归结为：您的内容需要什么？

您的网页是否有很长的文字段落？或者您正在查看有很多标题的主页？

一般来说，在处理正文时，我倾向于通过为移动设备/小屏幕尺寸设置基本字体大小来处理事情。然后，在更大的视口尺寸下，增加字体大小。什么视口大小/断点？这又取决于内容。您想密切关注每行文本的字符数。当它变得太长时，您将需要增加字体大小。这种方法不是设备特定，而是内容特定。

另外，keep an eye out for the vw font size unit。希望我们能尽快开始使用它。

【讨论】：

【解决方案2】：

我喜欢将em 或rem 用于用作内容文本的字体大小。让设备决定如何呈现此文本。

如果它的设计关键文本（如标题或导航项目）我使用 px 值，但它可能仍然使用 (r)ems 来解决这个问题。

如果文本需要缩放以适应其容器，我很幸运有一个名为fittextJS的插件

【讨论】：