响应式设计的字体大小

时间:2013-03-19 14:05:34

标签: html css responsive-design font-size

跨不同视口大小的字体大小调整的合理策略是什么?我看到三种不同的选择:

  1. 随着视口大小的减小,缩小字体大小。
  2. 所有视口大小的字体大小相同。
  3. 随着视口大小减小而增加字体大小。
  4. 什么是最好的选择,为什么?

2 个答案:

答案 0 :(得分:1)

这是一个开放式的问题 - 因为实际上,这取决于:您的内容需要什么?

你的网页有很长的文字段吗?或者你正在看一个有很多头条新闻的主页?

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

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

答案 1 :(得分:0)

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

如果它的设计关键文本(如标题或导航项)我使用px值,但它可能仍然可以使用(rem s。

如果文本需要扩展以适应其容器,我已经很幸运了一个名为fittextJS的插件