如何在 bootstrap 中设置字体大小以显示固定视图？

Question

我正在开始 Bootstrap 但是我遇到了字体大小的问题！当我设置图像宽度时，像这样：

width : 15%;

对于此 HTML 代码：

    <div class="container-fluid">

    <header class="row">
        <div class="col-sm-12">
            <section id="top_nav_bar">
                <img id="avatar" src="img/header/avatar.jpg" title="آقای شجاعی"  />
                <span class="yekan">Dr John Green</span>
            </section>
        </div>
    </header>

</div>

用PC打开网页（比如1100px宽），图片部分和用手机打开网页（比如500px宽）完全一样，爽！但它不适用于字体大小！我设置：

font-size: 80%;

但在移动设备（较小的屏幕）中，文本大小的比例比 Pc 大！比例不是恒定的！我该如何设置它？我想要响应式设计

Answer 1

您可以使用 vw 或 vh，它们会根据屏幕宽度或高度调整您的字体大小。

CSS3 有一些新值，用于根据当前视口大小调整事物的大小：vw、vh 和 vmin。现在提出是相关的，因为它在 Chrome 20（撰写本文时为金丝雀）发布。而不是在旗帜后面，它只是有效。生产使用还不完全存在，但很快就足够了

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

三个值中任何一个的一个单位是视口轴的 1%。 "Viewport" == 浏览器 window 大小 == window 对象。如果视口是40cm宽，1vw == 0.4cm.

如何在 bootstrap 中设置字体大小以显示固定视图？

how to set font-size in bootstrap to show a constant view?

css

font-size

responsive-design

twitter-bootstrap