Question

我在我的 Bootstrap 页面中使用了 HTML 并且我在这一行中添加了文本：

.pick_your_color {
  font-size: 72px;
  font-family: piepie, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(75, 45, 30);
  line-height: 1.2;
}

<div class="row text-center" style="padding-top: 280px">
  <h1 class="pick_your_color">Pick your color</h1>
</div>

一切正常并且一切正常，但是当我调整浏览器大小或使用移动设备时，文本使用 2 行而不是一行，有没有一种方法可以调整文本大小以适应行高？

Answer 1

您可以通过两种方式制作文本 responsive：

可以使用 vw 单位设置文本大小，即 viewport width。

.pick_your_color {
  font-size: 10vw;
  font-family: piepie, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(75, 45, 30);
  line-height: 1.2;
}

<div class="row text-center" style="padding-top: 280px">
  <h1 class="pick_your_color">Pick your color</h1>
</div>

或者，您也可以使用 media queries 在特定屏幕尺寸上更改元素的字体大小

.pick_your_color {
  font-family: piepie, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(75, 45, 30);
  line-height: 1.2;
}

@media screen and (min-width: 601px) {
  .pick_your_color {
    font-size: 80px;
  }
}


/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */

@media screen and (max-width: 600px) {
  .pick_your_color {
    font-size: 30px;
  }
}

<div class="row text-center" style="padding-top: 280px">
  <h1 class="pick_your_color">Pick your color</h1>
</div>

Answer 2

您可以根据视口宽度执行此操作，请查看此链接：Font scaling based on width of container

Answer 3

您可以使用以下代码。

p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
}

<p>Dummy Text.</p>

Answer 4

将字体大小从 px 更改为 vh，然后相应地调整值。我根据 Enviro 的建议编写了此代码。

.pick_your_color {
    font-size: 6vh;
    font-family: piepie, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(75, 45, 30);
    line-height: 1.2;
}

<div class="row text-center" style="padding-top: 280px">
        <h1 class="pick_your_color">Pick your color</h1>
</div>

运行代码片段并单击整页，然后尝试调整窗口大小以查看预期结果。

Answer 5

当 font-size 设置为 font-size: 72px; 时，表示任何视口、显示的字体大小都设置为 72px。

因此可以使用 vw。

As mdn says:

<块引用>

vw 是视口宽度的 1%。

然后你可以写一个类来定义响应式文本：

.foo-text {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;    
    font-size: 3vw;
}

Bootstrap 根据屏幕大小调整文本大小

5 个答案: