html - 如何设置

Question

我有一个 <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" />

Answer 1

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);