如何设置 <h1> 元素的最大尺寸？

Question

<h1 style="font-size:2.5vw;">Example</h1>我的 HTML 文件中有一个。我一直在使用“Chrome DevTools”（Google Chrome 的开发人员工具）测试它在不同视口大小中的外观。

我发现当设备设置为“iPad Pro”(1024x1366) 时，与 HTML 中的其余内容相比，标头太大。

为了解决这个问题，我想知道是否有一种方法可以在合并时设置标题元素的最大大小"font-size:2.5vw;"（我需要它仍然对视口的大小做出响应）？

我尝试添加max-width://size到style元素的字段中，但这没有什么区别。

注意：我的meta元素如下所示：<meta name="viewport" content="initial-scale=0.41, maximum-scale=1.0" />

Answer 1

您正在寻找的是clamp

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }

<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp