CSS 字体大小自适应屏幕宽度：媒体查询和视口单位

要根据屏幕宽度适配字体大小，你可以使用 CSS 中的媒体查询和视口单位来实现。

首先，使用媒体查询来根据屏幕宽度设置不同的字体大小。例如，你可以在 CSS 文件中添加以下代码：

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1201px) {
  body {
    font-size: 18px;
  }
}

上述代码将在屏幕宽度小于等于600px 时设置字体大小为 14px，宽度在 601px 到 1200px 之间时设置字体大小为 16px，宽度大于 1201px 时设置字体大小为 18px。你可以根据需要调整这些值。

然后，你可以使用视口单位来根据屏幕宽度设置字体大小。视口单位是相对于视口的尺寸进行计算的单位，常用的有 vw（视口宽度的百分比）和 vh（视口高度的百分比）。

例如，你可以在 CSS 文件中添加以下代码:

body {
  font-size: 4vw;
}

上述代码将字体大小设置为屏幕宽度的 4%。这意味着无论屏幕宽度如何变化，字体大小都会自动根据屏幕宽度进行调整。

希望以上解答能对你有所帮助！