Typography and font size Bootstrap does not change
<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 wrote plain text. I expected the font size to change as the resolution changed. But the font size always remains the same. How can I change the font size automatically when changing the resolution or screen size?
+2
1 answer
Here is one way to use media queries: 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;
}
}
+8