如何使用 CSS 自动调整字体大小？

当网页上的文本内容过多时，为了防止用户对页面阅读产生不良体验，我们可能需要自动缩放网页字体大小。CSS提供了许多属性和技巧来实现这个目的。

1. 使用vw单位

CSS3引入的vw单位可以根据设备宽度自动调整字体大小。vw单位代表视窗宽度的1/100，例如，当视窗宽度为1000px时，1vw的宽度为10px。以下是一个使用vw单位自适应调整字体大小的示例代码：

body {
  font-size: 1.6vw;
}

2. 使用calc()函数

calc()函数可以在CSS中进行数学运算，也可以结合vw单位进行使用。以下代码演示了如何使用calc()和vw单位实现根据设备宽度自动调整字体大小：

body {
  font-size: calc(10px + 1vw);
}

3. 使用@media查询

@media查询可以根据不同的设备宽度应用不同的样式规则，从而实现自适应字体大小的效果。以下代码演示了如何使用@media查询根据不同设备宽度调整字体大小：

body {
  font-size: 16px; /* 默认字体大小 */
}

/* 在宽度小于800px时缩小字体大小 */
@media screen and (max-width: 800px) {
  body {
    font-size: 14px;
  }
}

/* 在宽度小于500px时进一步缩小字体大小 */
@media screen and (max-width: 500px) {
  body {
    font-size: 12px;
  }
}

4. 使用JavaScript

除了CSS外，我们还可以使用JavaScript来实现自适应字体大小的效果。以下是一个简单的JavaScript脚本，可以根据设备宽度自动调整字体大小：

document.querySelector('body').style.fontSize = window.innerWidth / 20 + 'px';

以上是四种实现自适应字体大小的方法，根据需求和场景的不同，我们可以选择其中一种或多种进行使用。

参考资料：

• https://www.w3schools.com/cssref/css_units.asp
• https://www.w3schools.com/cssref/func_calc.asp
• https://www.w3schools.com/css/css3_mediaqueries.asp