Question

我不明白为什么当我缩小屏幕时，我的字体尺寸不会减小。

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

相反，当我将屏幕缩小时，字体不会改变尺寸，弄乱设计。

我在24＆＃34;上建立我的投资组合网站。监视，然后在我的13＆＃34;屏幕，以确保它的缩放。

＆＃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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我认为您正在寻找的是viewport percentage units。

试试这个：

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

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

来自规范：

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

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。


vw unit - 等于初始包含块宽度的1％。

vh单位 - 等于初始包含高度的1％   块。

vmin unit - 等于vw或vh中的较小者。

vmax单位 - 等于vw或vh中的较大者。

使用百分比值（％）不会相对于视口缩放字体，因为这些值是相对于父级或祖先的。请参阅规范：4.3. Percentages: the <percentage> type

Answer 2

字体在使用百分比时不会相应地改变尺寸。

请参阅Viewport Sized Typeography上的这篇文章。

您可以使用vmin，vmax，vw或vh来获取响应速度。例如：

div {
  font-size: 5vmin;
}

当您使屏幕变大或变小时，这将改变字体的大小。

来自文章：

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，取较小者

1vmax = 1vw或1vh，取较大者

另一方面，百分比大小根据上下文设置字体大小，它将是其层次结构中具有特定字体大小的父级。

字体大小，百分比值（％）未按屏幕大小缩放

2 个答案: