Bootstrap typography and font size does not change

2019-05-28 18:34发布

问题:

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

This is a navigation bar and I have written some plain text. I expected the font-size to change when I change the resolution. But the font-size always remains the same. How is it possible to change font-size automatically when resolution or screen size changes?

回答1:

Here is one possibility using media-queries: http://codepen.io/panchroma/pen/stBnj

It is possible to scale font sizes in direct proportion to the viewport or window size -- double the window size and the font-size changes. This approach tends to be used less often now. It's harder to control the results as the screen size gets very large or very small, and all modern browsers understand media-queries now which wasn't the case a couple of years ago.

For specific cases you'll find all sorts of options, for example http://fittextjs.com to scale text to fill the space available.

Good luck!

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