你可以在 CSS calc 计算中使用纵横比吗？

Question

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

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

我有一种基于纵横比调整字体的 hacky 解决方案。如果纵横比通过断点，我只需重新计算字体大小。但我想做类似的事情：

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

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

现在我可以用 Javascript 来做，我只是想知道它可以用 CSS 来做。

Answer 1

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

CSS 中不存在宽高比的关键字或类似关键字。您遇到的唯一选项一开始似乎可行，但实际上是CSS specification only allows a numeric dividend。我不确定为什么会这样 ─ 这将是 CSSWG 的一个问题（对于好奇的人来说，它可能被埋在电子邮件档案中）。

Answer 2

根据您的评论

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

我认为以下方法可行。这与纵横比无关。这符合max-font-size（如果曾经存在过）

1. 从手机屏幕开始

   您使用vw 单位设置与屏幕宽度相关的文本大小。

   这很简单，可以这样做：

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

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

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

1. 使用media queries 在给定宽度后限制字体大小

   这个想法是，在给定屏幕宽度之后，字体需要具有与屏幕宽度无关的固定大小。可以这样实现……

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

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

最终结果是您的字体将根据屏幕大小进行调整并具有响应性。