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

Question

我的HTML文件中有一个<h1 style="font-size:2.5vw;">Example</h1>。我一直在使用"Chrome DevTools"(谷歌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

Answer 2

CSS没有内置的max-font-size或min-font-size方法，但一些变通方法可以完成这项工作。

一种方法是使用media queries:

h1 {
font-size: 30px;
}
@media screen and (min-width: 1600px) {
h1 {
font-size: 50px;
}
}

另一种方法是将max()或min()函数与视口vw单元一起使用：

font-size: min(max(30px, 3vw), 50px);