CSS 如何根据窗口宽度调整字体大小

在本文中，我们将介绍如何使用CSS根据窗口宽度来动态调整字体大小的方法。

阅读更多：CSS 教程

使用vw单位

CSS提供了一种非常方便的单位，即vw（viewport width），它代表了视口的宽度。通过使用vw单位，我们可以根据窗口宽度自动调整字体大小。

例如，如果我们希望在窗口宽度为1000px时，字体大小为16px，在窗口宽度为2000px时，字体大小为32px，我们可以使用以下CSS代码：

body {
  font-size: 1vw;
}

@media (min-width: 1000px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 2000px) {
  body {
    font-size: 32px;
  }
}

通过设置body元素的字体大小为1vw，我们就可以根据视口宽度动态调整字体大小了。在@media查询中，我们可以使用min-width属性来指定不同窗口宽度下的字体大小。

使用calc函数

除了使用vw单位外，我们还可以使用CSS的calc函数来根据窗口宽度计算字体大小。calc函数可以进行基本的四则运算，让我们可以更加灵活地控制字体大小。

下面是一个使用calc函数动态调整字体大小的示例：

body {
  font-size: calc(12px + 0.5vw);
}

在这个例子中，字体大小由12px加上视口宽度的0.5%决定。这样，当窗口变窄时，字体大小会逐渐减小；当窗口变宽时，字体大小会逐渐增大。

使用JavaScript

除了纯粹使用CSS来实现动态调整字体大小外，我们还可以借助JavaScript来实现更加复杂的逻辑。

首先，我们可以使用JavaScript代码获取窗口宽度：

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

然后，我们可以根据窗口宽度计算出字体大小，并将其应用到需要调整的元素上：

window.onresize = function() {
  var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = windowWidth / 100;
  document.getElementById("myElement").style.fontSize = fontSize + "px";
}

在这个例子中，我们将窗口宽度除以100来计算字体大小，并将其应用到id为”myElement”的元素上。通过将这段代码放入window.onresize事件处理函数中，我们可以在窗口大小改变时动态调整字体大小。