html - 百分比值 (%) 的字体大小不随屏幕大小缩放

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

我想你要找的是viewport percentage units .

试试这个:

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

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

来自规范:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.

使用百分比值 (%) 不会相对于视口(viewport)缩放字体，因为这些值是相对于父级或祖先级的。查看规范:4.3. Percentages: the <percentage> type