css - 如何为所有使用 vw 单位的元素指定最大 vw 大小？

Question

我在字体、填充和边距大小上使用了 vw。我首先设计手机。在大约 700 像素之前，一切看起来都很好，此时字体开始看起来太大了。

我想确保字体不会变得比指定值大。是否可以设置最大字体大小？

这是我使用 vw 的一些示例代码。但在 700px 之后，它开始看起来太大而无法舒适地阅读。

#intro h1 {
    font-weight: 700;
    font-size: 8vw;
}

我唯一的想法是使用媒体查询并指定像素字体大小，但这似乎不适合这项工作。我必须为所有使用 vw 单位的元素创建媒体查询。

有什么建议吗？

Answer 1

没有最小字体大小或最大字体大小之类的东西。

在这种情况下使用媒体查询；

展开代码段以使用它。

#intro h1 {
    font-weight: 700;
    font-size: 8vw;
}

@media screen and (min-width: 700px) {
  #intro h1 {
    font-size: 3.5rem;
  }
}

<div id="intro"><h1>Coucou</h1></div>