带有百分比值（％）的字体大小不随屏幕大小缩放

Question

我不明白为什么我缩小屏幕时字体没有减小。

我将所有CSS都设置为百分比，以便所有内容都能响应。

相反，当我缩小屏幕时，字体不会改变大小，从而弄乱了设计。

我正在24英寸显示器上构建我的投资组合站点，然后在13英寸屏幕上对其进行检查以确保它可以缩放。

#about {

  height: 100%;

  width: 100%;

  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.12, #061419), color-stop(0.61, #36875F));

  background-repeat: no-repeat;

}

#about .container-fluid,

#about .container-fluid .row {

  height: 100%;

  width: 100%;

}

.about-left {

  height: 100%;

  background-image: url('../../images/jay-ocean.jpg');

  background-repeat: no-repeat;

  background-position: 0 100%;

}

.about-right {

  width: 50%;

}

.about-content {

  width: 50%;

  margin: 0 auto;

  padding-top: 23%;

  text-align: center;

}

.about-content-title h1 {

  text-align: center;

  font-size: 320%;

}

.about-content-info p {

  font-size: 110%;

  word-spacing: 0.8em;

}

.about-personal-info h4 {

  font-size: 110%;

  word-spacing: 0.8em;

}


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section id="about">



  <div class="container-fluid">



    <div class="row">



      <div class="about-left col-lg-6 col-md-6 col-sm-12 col-xs-12">

      </div>



      <div class="about-right col-lg-6 col-md-6 col-sm-12 col-xs-12">



        <div class="about-content">



          <div class="about-content-title">

            <h1>I'M JAY.</h1>

          </div>



          <br />



          <div class="about-content-info">

            <p>An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging

              is boring, and makes me yawn.

              <br />

              <br />Currently seeking a Javascript position, using the MEAN stack, in New York City. Being rebellious, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching

              ridiculous levels of success, not just modest realistic ones. I love working with a solid team.

            </p>

          </div>



          <br />



          <div class="about-personal-info">

            <h4>Email:</h4>

            <h4>ICON ICON ICON ICON</h4>

          </div>



        </div>



      </div>



    </div>



  </div>



</section>

Answer 1

我认为您要寻找的是 视口百分比单位 。

尝试这个：

.about-content-title h1 { font-size: 5vw; }

通过此调整，当您调整浏览器窗口的大小时，字体将按比例缩放。

从规格：

5.1.2。视口百分比长度：对vw，vh，vmin，vmax单位

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

• vw单位 -等于初始包含块的宽度的1％。
• vh单位 -等于初始包含块的高度的1％。
• vmin unit- 等于vw或的较小者vh。
• vmax unit- 等于vw或的较大者vh。

使用百分比值（％）不会相对于视口缩放字体，因为这些值是相对于父项或祖先的。参见规格： 4.3。
百分比：<percentage>类型