Bootstrap字体和字体大小不变 [英] Bootstrap typography and font size 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 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?
推荐答案
以下是使用媒体查询的一种可能性: http://codepen.io/panchroma/pen/stBnj
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.
在特定情况下，您会找到各种选项，例如 http://fittextjs.com 可以缩放文本以填充可用空间.
For specific cases you'll find all sorts of options, for example http://fittextjs.com to scale text to fill the space available.
祝你好运！
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字体和字体大小不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
