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

Question

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

twitter-bootstrapresizefont-sizetypography

3

<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>

这是一个导航栏，我写了一些纯文本。我希望在更改分辨率时字体大小能够改变。但是字体大小总是保持不变。如何实现在分辨率或屏幕尺寸更改时自动改变字体大小？

- Jay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Taiaroa · Accepted Answer

这里有一个可能性，可以使用媒体查询：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;
  }
}