将字体大小调整为窗口答案

【问题标题】：Size Font to Window将字体大小调整为窗口
【发布时间】：2014-02-21 11:01:35
【问题描述】：

我正在为我的页面寻找合适的字体大小。我目前将其设置为-webkit-xxx-large，因为它非常适合我的窗口。

无论窗口大小如何，我需要的是适合窗口宽度（而不是高度）的文本。

示例：
1920px 窗口宽度 - font-size: -webkit-xxx-large
480px 窗口宽度 - font-size: large

无论它使用 Javascript/jQuery 还是只是 CSS，它都不会打扰我。我只需要一个合适的通用型。

【问题讨论】：

【解决方案1】：

使用@media 尝试media query，例如（IE support）

body {
    font-size: -webkit-xxx-large
}
@media screen and (max-width: 480px) {
    body {
        font-size: large;
    }
}

演示：Fiddle - 减小结果面板的宽度

【讨论】：

【解决方案2】：

不要使用大小常量。根据em 比例查找一个适用于不同屏幕尺寸的值。

【讨论】：

【解决方案3】：

文本可能很难精确调整大小。 BigText 是一个不错的 Javascript 库，可以很容易地将其大小调整为 em 的 1/100。

【讨论】：

【解决方案4】：

您可以查看以下内容：http://simplefocus.com/flowtype/

虽然我不建议您将其用于正文，因为媒体查询可能就足够了，并且可以让您获得更多控制权。在小屏幕上更小并不总是更好。

【讨论】：