自适应字体大小 css

在 CSS 中，你可以使用 `@media` 媒体查询和 `vw` 单位来实现自适应字体大小。

首先，使用 `@media` 媒体查询来检测设备的屏幕宽度或高度，并为不同的屏幕尺寸设置不同的字体大小。例如：

/* 当屏幕宽度小于等于 600px 时，字体大小为 14px */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 当屏幕宽度大于 600px 且小于等于 1024px 时，字体大小为 16px */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 当屏幕宽度大于 1024px 时，字体大小为 18px */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

其次，你可以使用 `vw` 单位来根据视口宽度设置字体大小。`vw` 单位表示视口宽度的百分比，1vw 等于视口宽度的1%。例如：

h1 {
  font-size: 5vw; /* 根据视口宽度自动调整字体大小 */
}

以上代码将使 `<h1>` 元素的字体大小随着视口宽度的变化而自动调整，当视口宽度为 1000px 时，字体大小为 50px。

你可以根据实际需求选择使用 `@media` 媒体查询或 `vw` 单位，或者结合两者来实现自适应字体大小。