Bootstrap 排版和字体大小不会改变答案

【问题标题】：Bootstrap typography and font size does not changeBootstrap 排版和字体大小不会改变
【发布时间】：2016-01-24 18:05:48
【问题描述】：

<BODY>
<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header col-xs-3 col-md-3">
        <a class="navbar-brand" href="#">My Brand</a>
    </div>
    <div class="col-xs-9 col-md-9">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>
</nav>
</BODY>

这是一个导航栏，我写了一些纯文本。当我改变分辨率时，我希望字体大小会改变。但字体大小始终保持不变。当分辨率或屏幕尺寸发生变化时，如何自动更改字体大小？

【问题讨论】：

标签： twitter-bootstrap resize font-size typography

【解决方案1】：

这是使用媒体查询的一种可能性：http://codepen.io/panchroma/pen/stBnj

可以与视口或窗口大小成正比来缩放字体大小——窗口大小加倍，字体大小发生变化。这种方法现在趋于较少使用。随着屏幕尺寸变得非常大或非常小，控制结果变得更加困难，并且所有现代浏览器现在都可以理解媒体查询，而几年前并非如此。

对于特定情况，您会发现各种选项，例如 http://fittextjs.com 可缩放文本以填充可用空间。

祝你好运！

CSS

@media (max-width: 480px) {
    .navbar li a{
    font-size:14px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .navbar li a{
    font-size:20px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .navbar li a{
    font-size:26px;
    }
}

@media (min-width: 980px) {
  .navbar li a{
  font-size:30px;
  }
}

【讨论】：

是的，目前我正在使用这种方法。谢谢。
我们应该选择的最小尺寸（分辨率）是多少 - 因为我见过分辨率低于 480 像素的手机。
@user2554706 我不确定对于您需要在 CSS 中允许的最小屏幕是否有正确或错误的答案，这样的决定通常取决于您的设计细节。我通常从一个完整的窗口视图开始，然后开始挤压它。当我到达屏幕上的布局开始崩溃的地步时，我编写了一个新的 MQ 来修复布局。如果我的设计在低于 320 像素宽的视口上不完美，我个人不会太担心，但这只是我自己。