logo标签列表

你能在CSS计算中使用长宽比吗？

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

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

我有一种可以根据纵横比调整字体的折中解决方案。如果纵横比超过断点，我会重新计算字体大小。但我想做这样的事情：
font-size: calc(aspect-ratio * simplescalingcomputation)
然而，如果我使用100vw/100vh，calc就不能处理。我认为原因是，查看calc文档时，你不能除以px，只能除以数字。
现在我可以用JavaScript来实现，我只是想知道它能否在CSS中完成。
你打算用它来渲染响应式的<h1>元素等，还是用于<body>文本？这个工具的预期使用是什么？ - I haz kode
针对响应式缩放或文本和其他元素。 - Cliff Stamp
CSS在缩放图像时非常好地保持了其宽高比。您可以使用padding来缩放元素并保持其宽高比。如果您想根据屏幕大小缩放字体，也有相应的方法。您能否提供一个更具体的示例以说明您想要实现什么？ - I haz kode
具体的例子是通过视口宽度调整字体大小，但如果纵横比大于某个值，则按照纵横比进行调整。这是为了防止在宽度较大但高度较短的视口上将文本扩大并将所有内容移到页面外。 - Cliff Stamp
2个回答
2
如果我理解你的问题正确，那么没有（除了媒体查询，正如你所意识到的那样）。
在CSS中不存在与宽高比相关的关键字或类似的东西。你遇到的唯一选项似乎起初可以工作，但实际上CSS规范只允许使用数字被除数。我不确定为什么会这样 ─ 这将成为CSSWG的一个问题（对于好奇心的人来说，它可能被埋藏在电子邮件档案中）。
2

根据您的评论

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

我认为以下方法可以解决问题，这与纵横比无关。这可以被称为max-font-size（如果这个术语真的存在的话）。

  1. Start with mobile screens

    You set the size of the text in relation to the screen width using vw units.

    This is very simple and can be done like so:

    .logo {
  font-size: 20vw;
  text-align: center;
}
    <div class="logo">Stack Overflow</div>

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

  1. Use media queries to cap font size after a given width

    The idea is that after a given screen width, the font needs to have a fixed size that's independent of the screen width. This can be achieved like so...

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

@media screen and (min-width: 450px) {
  .logo {
    font-size: 83px;
  }
}
    <div class="logo">Stack Overflow</div>

最终结果是，您的字体将根据屏幕大小进行调整，并且具有响应性。
谢谢，那就是我正在做的事情，只是看起来有些笨拙。我在寻找一种方式，可以通过在计算中正确设置宽高比，仅用一次计算来完成它。 - Cliff Stamp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接