<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>
这是一个导航栏，我写了一些纯文本。我希望更改分辨率时字体大小会发生变化。但字体大小始终保持不变。当分辨率或屏幕尺寸发生变化时，如何自动更改字体大小？
最佳答案
这是使用媒体查询的一种可能性:http://codepen.io/panchroma/pen/stBnj
可以与视口(viewport)或窗口大小成正比来缩放字体大小——窗口大小加倍，字体大小发生变化。这种方法现在趋于较少使用。随着屏幕尺寸变得非常大或非常小，控制结果变得更加困难，并且所有现代浏览器现在都可以理解媒体查询，而几年前并非如此。
对于特定情况，您会发现各种选项，例如 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;
}
}
关于twitter-bootstrap - Bootstrap 排版和字体大小不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24709760/