有没有办法在 twitter bootstrap 中通过屏幕宽度调整字体大小？答案

【问题标题】：Is there a way to adjust font size by screen width in twitter bootstrap?有没有办法在 twitter bootstrap 中通过屏幕宽度调整字体大小？
【发布时间】：2016-02-20 07:50:53
【问题描述】：

我看过很多关于如何使用不同设备的媒体查询来调整字体大小的帖子。但是有没有办法仅根据屏幕的宽度来使字体变大或变小？因此，如果您将浏览器窗口缩小到尽可能窄的宽度，则字体会变小，但如果您将窗口最大化，则字体会变大。

【问题讨论】：

使用 mediaQueries 怎么样？
好吧，至少对我来说，当我只是最大化或最小化浏览器窗口时，媒体查询似乎不起作用。
这取决于媒体查询，如果浏览器支持媒体查询，这应该适用于所有现代浏览器：jsfiddle.net/x3u3bafv
在 Bootstrsap 中已经或自动运行，大文本在大屏幕上会很大，在小屏幕上也会大但比大屏幕小。
axel.michel，你的 jsfiddle 真的很有帮助！有没有办法可以将您的答案标记为最有帮助？

标签： css twitter-bootstrap

【解决方案1】：

比起使用额外的库，我更喜欢使用：视口、媒体查询和根据屏幕大小调整的字体大小。

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

CSS：

@media(max-width:767px){
    .image-thumbnail > p{
        font-size: 3.0vw;
    }
}

CSS-Tricks 有更多关于这种技术的信息：Viewport Sized Typography

【讨论】：

【解决方案2】：

看看

Flowtype.js

它会让你的字体响应式。

【讨论】：