Question

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

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

Answer 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;
  }
}

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

1 个答案: