如何在引导程序中设置字体大小以显示常量视图？

Question

我正在起步，但我有字体大小的问题！当我设置图像宽度时，像这样：

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打开网页(例如1100 PC宽度)时，图像部分与我通过移动(例如500 PC宽度)打开网页时完全相同，这很酷！但它不适用于字体大小！我设定：

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%。“查看端口”==浏览器窗口大小==窗口对象。如果视口宽40厘米，则1vw == 0.4cm。