我正在尝试制作响应式文本，但无论屏幕有多大，它的大小都是固定的

Question

在模拟器上文字看起来还可以，但在我的手机上它对线路来说太大了

<label text="just some regular text" class="text"> </label>
.text{
font-size: 20%;
}

Answer 1

对font-size 属性使用% 值不会使大小与视口大小成比例。它只是相对于父元素的字体大小调整文本大小。

例如：

body {
  font-size: 32px;
}

.text {
  font-size: 50%;
}

<div class="text">This text is 50% of 32px = 16px;</div>

要使字体大小响应，有几个选项：

1. 使用媒体查询来定义各种断点的字体大小
2. 使用视口百分比单位使字体大小随视口大小缩放

1.媒体查询

.text {
  font-size: 16px;
}

@media screen and (min-width: 600px) {
  .text {
    font-size: 24px;
  }
}

<div class="text">This font size is 16px when the viewport is between 320px and 599px, and 24px when the viewport is 600px or larger.</div>

2。视口百分比单位

如果您希望字体大小与视口大小成比例，您可以使用viewport percentage units 中的任何一个：

• vw - 整个视口宽度的百分比
• vh - 整个视口高度的百分比
• vmin - 视口宽度或高度的百分比，以较小者为准
• vmax - 视口宽度或高度的百分比，以较大者为准

例如：

  .text {
    font-size: 5vw;
  }

表示font-size 是视口宽度的 5%。如果视口为 1200 像素，则字体大小为 60 像素；如果视口更小，那么 600 像素，字体大小将是 30 像素。

有一些创造性和有趣的方法可以使用这些视口百分比单位以及calc() 来创建具有最小尺寸的响应式字体大小。例如：

.text {
  font-size: calc(16px + 2vh);
}

<div class="text">This text 16px + 2% of the viewport width.</div>

CSS Tricks 有一个few great articles 以其他方式使用视口百分比单位。