带百分比值的字体大小（％）不随屏幕大小缩放 [英] Font size with percentage value (%) not scaling with screen size

问题描述

我不明白为什么我的字体不会减小的大小，当我使屏幕更小。

我以百分比来设置所有的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-position：0 100％;}。about-right {width：50％;}。 margin：0 auto; padding-top：23％; text-align：center;}。about-content-title h1 {text-align：center; font-size：110％; font-size：320％;}。 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 =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>一个创业者，全栈开发者。每当我面对一个我关心的挑战，它给我一个仓促。专注于大局对我来说很重要，但我从来不会忘记较小的细节。任何没有挑战性的是无聊，让我打哈欠。 < br /> < br />目前在纽约市使用MEAN堆栈寻找Javascript位置。作为反叛，雄心勃勃，努力工作是对我非常重要的价值观。我想加入一家拥有类似价值观的公司，目标是达到可笑的成功水平，而不仅仅是现实的温和。我喜欢和一个坚实的团队合作。 < / p> < / div> < br /> < div class =about-personal-info> < h4>电子邮件：< / h4> < h4>图标图标图标< / h4> < / div> < / div> < / div> < / div> < / div>< / section>  

解决方案

我认为您要查找的是

请尝试以下操作：

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

使用此调整，当您重新调整浏览器窗口大小时，字体将缩放。 / p>

根据规范：

5.1.2。视口百分比长度： vw ， vh ， vmin ， vmax units

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

• vw单位 - 等于初始包含块宽度的1％。


• vh unit - 等于包含
  块的初始高度的1％。


• / strong> - 等于 vw 或 vh 中的较小者。


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

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

I'm not understanding why my font isn't decreasing in size when I make the screen smaller.

I set all my CSS in percentages so that everything would be responsive.

Instead, when I make the screen smaller, the font doesn't change size, messing up the design.

I'm building my portfolio site on my 24" monitor, and then checking it on my 13" screen to make sure it's scaling.

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

解决方案

I think what you're looking for are viewport percentage units.

Try this:

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

With this adjustment, when you re-size the browser window the font will scale in size.

From the spec:

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.

Using percentage values (%) doesn't scale your fonts relative to the viewport because these values are relative to a parent or ancestor. See the spec: 4.3. Percentages: the <percentage> type

这篇关于带百分比值的字体大小（％）不随屏幕大小缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！