您可以在 CSS 计算中使用纵横比吗?

Question

这似乎是一个简单的问题：

@media screen and (min-aspect-ratio: 125/100) {
html,body,main{
font-size: calc(0.6 * (16px + 0.03 * (100vw - 240px)));
}
}

我有一种黑客解决方案可以根据纵横比调整字体。如果纵横比通过断点，我只需重新计算字体大小。但我想做这样的事情：

字体大小：计算(纵横比 * 简单缩放计算(

但是，如果我使用 100vw/100vh，那么计算不喜欢这样。我认为原因是查看计算文档，您不能除以 px，只能用数字除以。

现在我可以在Javascript中做到这一点，我只是想知道它可以在CSS中完成。

Answer 1

如果我正确理解您的问题，则不(除了您意识到的媒体查询(。

CSS 中不存在纵横比的关键字或类似的关键字。您遇到的唯一选项起初似乎有效，但实际上 CSS 规范只允许数字红利。我不确定为什么会这样——这将是 CSSWG 的一个问题(它可能被埋在好奇的电子邮件档案中(。

Answer 2

根据您的评论

[...]字体大小按视口宽度，但如果纵横比大于一定量，则按纵横比进行调整。这是为了防止文本缩放得太大，并在宽但短的视口上将所有内容移出页面。

我认为以下内容会起作用。这与纵横比无关。如果曾经存在过，这符合max-font-size条件

1. 从移动屏幕开始

   您可以使用vw单位设置相对于屏幕宽度的文本大小。

   这非常简单，可以像这样完成：

   .logo {
   font-size: 20vw;
   text-align: center;
   }

   <div class="logo">Stack Overflow</div>

好吧，正如您已经知道的那样，这适用于移动屏幕并且可以很好地缩放文本，但会产生一个大问题。文本在大屏幕上变得太大。我的理解是，这是你的主要问题。一个可能的解决方法是...

2. 使用媒体查询在给定宽度后限制字体大小

   这个想法是，在给定的屏幕宽度之后，字体需要具有独立于屏幕宽度的固定大小。这可以像这样实现...

   .logo {
   font-size: 20vw;
   text-align: center;
   }
   @media screen and (min-width: 450px) {
   .logo {
   font-size: 83px;
   }
   }

   <div class="logo">Stack Overflow</div>

最终结果是您的字体将适应屏幕尺寸并具有响应能力。