CSS容器查询：实现动态字体大小

在现代网页设计中，响应式设计已经成为一种标准。然而，如何在不同的容器尺寸下动态调整字体大小，仍然是一个常见的问题。今天，我们将探讨如何使用CSS中的容器查询（Container Queries）来实现一个动态设置字体大小的示例。什么是容器查询？容器查询是CSS的一个特性，允许根据元素的容器尺寸来应用不同的样式。这意味着我们可以根据父容器的宽度或高度来调整元素的属性，如字体大小、间距等。示例需求假设我们有一个div元素，其高度为屏幕视口高度的20%（20vh），宽度为视口高度的100%（100vh），我们希望其中的span元素的字体大小动态地设置为该div高度的10%。基础HTML和CSS首先，我们定义一个基本的HTML结构：div