根据容器大小进行字体缩放

Question

我很难理解字体缩放问题。我目前有一个网站，其正文font-size为100%。100%但什么？这似乎是按16像素计算的。我的印象是100%在某种程度上指的是浏览器窗口的大小，但显然不是，因为无论窗口大小调整为移动宽度还是成熟的宽屏桌面，它始终是16像素。如何使网站上的文本相对于其容器缩放？我尝试使用em，但这也无法扩展。我的理由是，当你调整大小时，像我的菜单这样的东西会被压扁，所以我需要减少.me

P粉346326040 · Answer

这个问题是由 Alex 在 2507rkt3的回答。

这一事实并不意味着 vw 不能在某种程度上用于确定该容器的大小。现在要看到任何变化，我们必须假设容器在某种程度上是尺寸灵活的。无论是通过直接百分比宽度还是通过100%减去边距。如果容器总是设置为，比方说，200px 宽，那么这一点就变得“没有意义”——然后只需设置适合该宽度的font-size。 p>

示例 1

但是，对于宽度灵活的容器，必须认识到容器在某种程度上仍然根据视口调整大小。因此，需要根据与视口的百分比大小差异来调整 vw 设置，这意味着要考虑父包装器的大小。 看这个例子：

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

假设这里 div 是 body 的子级，它是 100% 的 50%宽度，在这种基本情况下是视口大小。基本上，您想要设置一个对您来说看起来不错的 vw 。正如您在上述 CSS 内容中的评论中所看到的，您可以通过数学方式“思考”整个视口大小，但您不需要这样做。文本将随容器“弯曲”，因为容器会随着视口大小的调整而弯曲。这是两个不同大小的容器的示例。

示例 2

您可以通过强制基于此进行计算来帮助确保视口大小。 考虑这个示例：

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

尺寸仍然基于视口，但本质上是基于容器尺寸本身设置的。

容器的大小是否应该动态变化...

如果容器元素的大小最终通过 @media 断点或 JavaScript 动态改变其百分比关系，那么无论基本“目标”是什么，都需要重新计算以维持相同的“关系” " 用于调整文本大小。

以上面的示例#1 为例。如果通过 @media 或 JavaScript 将 div 宽度切换为 25% 宽度，则同时 font-size 需要在媒体查询中或通过 JavaScript 进行调整，以适应新的计算结果 5vw * .25 = 1.25。这将使文本大小与原始 50% 容器的“宽度”从视口大小减少一半时的大小相同，但现在由于更改而减少了它自己的百分比计算。

挑战

使用 CSS calc() 函数在使用中，动态调整会变得困难，因为该函数目前无法用于 font-size 目的。因此，如果 calc() 上的宽度发生变化，则无法进行纯 CSS 调整。当然，对边距宽度的微小调整可能不足以保证对 font-size 进行任何更改，因此可能并不重要。

P粉957723124 · Answer

容器查询现在可能是最好的选择，具体取决于您的用例，并且所有主要浏览器都支持。请在此处查看支持级别：https://caniuse.com/mdn-css_properties_container

现在很容易控制

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}