我有一个 <h1 style="font-size:2.5vw;">Example</h1>
在我的 HTML 文件中。我一直在使用“Chrome DevTools”(Google Chrome 的开发人员工具)测试它在不同视口(viewport)大小下的外观。
我发现当设备设置为“iPad Pro”(1024x1366) 时,与我的 HTML 中的其余内容相比,标题太大了。
为了解决这个问题,我想知道是否有办法在合并 "font-size:2.5vw;"
的同时设置标题元素的最大大小。 (我需要它仍然响应视口(viewport)的大小)?
我尝试添加 max-width://size
进入style
元素的字段,但这并没有什么不同。
注意:我的 meta
元素如下所示:<meta name="viewport" content="initial-scale=0.41, maximum-scale=1.0" />
最佳答案
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()
带有视口(viewport)的函数 vw
单元:font-size: min(max(30px, 3vw), 50px);
关于html - 如何设置 <h1> 元素的最大尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61432609/