如何在引导程序中设置字体大小以显示恒定视图？答案

【问题标题】：how to set font-size in bootstrap to show a constant view?如何在引导程序中设置字体大小以显示恒定视图？
【发布时间】：2015-04-11 22:34:05
【问题描述】：

我开始使用 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 大！比例不是固定的！我该如何设置？我想要一个响应式设计

【问题讨论】：

标签： css twitter-bootstrap responsive-design font-size

【解决方案1】：

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

CSS3 有一些相对于当前视口大小调整事物大小的新值：vw、vh 和 vmin。现在提出它是相关的，因为它在 Chrome 20（撰写本文时为金丝雀）中提供。而不是在旗帜后面，它只是工作。生产用途还没有完全到位，但很快就会出现

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

三个值中任何一个的一个单位是视口轴的 1%。 “视口” == 浏览器窗口大小 == 窗口对象。如果视口是 40 厘米宽，1vw == 0.4 厘米。

【讨论】：