CSS 如何根据容器大小缩放字体的大小？

CSS 提供了几种方法来实现根据容器的大小缩放字体大小。下面是几种主要的方法：

1. 使用视口单位（Viewport Units）

利用视口单位，如 vw, vh, vmin, vmax，可以实现字体大小的响应式缩放。例如，vw 表示视口宽度的百分比，vh 表示视口高度的百分比。

css
.container {
  font-size: 2vw; /* 字体大小为视口宽度的2% */
}

这种方法的缺点是字体大小直接与视口的大小挂钩，而不是容器的大小。

2. 使用媒体查询（Media Queries）

通过媒体查询，可以在不同的屏幕尺寸下应用不同的样式规则。这样可以为不同的容器宽度设置不同的字体大小。

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

@media (max-width: 600px) {
  .container {
    font-size: 14px; /* 在视口宽度小于600px时变小 */
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .container {
    font-size: 18px; /* 在视口宽度介于601到1200px时变大 */
  }
}

3. 使用CSS计算函数 calc()

calc() 函数允许您执行计算来确定CSS属性的值。可以将固定大小与视口单位相结合，为字体大小提供更多控制。

css
.container {
  font-size: calc(12px + 1vw);
}

4. 使用rem单位和html的font-size

如果容器的大小基于rem单位，可以通过改变html标签的font-size来间接改变容器内字体的大小。

css
html {
  font-size: 16px;
}

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

.container {
  font-size: 1.5rem; /* 1.5倍于html的字体大小 */
}

5. 使用JavaScript

在某些情况下，可能需要更精细的控制，可以使用JavaScript来监听窗口大小的变化，并根据容器的大小动态调整字体大小。

javascript
function adjustFontSize() {
  var container = document.querySelector('.container');
  var containerWidth = container.offsetWidth;
  var fontSize = containerWidth / 100; // 假设容器宽度的百分之一为基本字体大小
  container.style.fontSize = fontSize + 'px';
}

window.addEventListener('resize', adjustFontSize);
adjustFontSize();

使用JavaScript的方法提供了最灵活的解决方案，但它需要额外的性能开销，并且可能会在没有JavaScript的环境下失效。

通过上述方法，你可以根据容器的大小来缩放字体大小，从而实现响应式设计。每种方法都有其适用场景和限制，可以根据实际需要选择最合适的方法。