Schriftartskalierung basierend auf der Containergröße

Question

Es fällt mir schwer, das Problem mit der Schriftskalierung zu verstehen.

Ich habe derzeit eine Website mit 100 % Fließtext font-size. 100 % aber was? Dies scheint mit 16 Pixeln berechnet zu sein.

Ich hatte den Eindruck, dass sich 100 % irgendwie auf die Größe des Browserfensters beziehen, aber anscheinend nicht, da es immer 16 Pixel sind, unabhängig davon, ob die Fenstergröße auf die Breite eines Mobilgeräts oder auf einen vollständigen Breitbild-Desktop geändert wird.

Wie skaliere ich den Text auf einer Website im Verhältnis zum Container? Ich habe versucht, em zu verwenden, aber das lässt sich auch nicht skalieren.

Meine Argumentation ist, dass Dinge wie mein Menü gequetscht werden, wenn Sie die Größe ändern. Daher muss ich den px von .menuItem .menuItem 的 px font-size 以及其他与容器宽度相关的元素。 （例如，在大桌面上的菜单中，22px 效果很好。向下移动到平板电脑宽度，16px und anderen mit Elementen, die sich auf die Containerbreite beziehen, reduzieren. (Beispielsweise funktioniert 22px in einem Menü auf einem großen Desktop gut. Wenn wir uns auf die Tablet-Breite beschränken, ist 16px besser geeignet.)

Ich weiß, ich könnte Haltepunkte hinzufügen, aber ich möchte wirklich, dass der Text schön skaliert, als ob ich die zusätzlichen Haltepunkte hätte, sonst würde ich am Ende Hunderte von Haltepunkten pro 100 Pixel erhalten, die ich über die Textbreite kontrolliere.

Answer 1

这个问题是由 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 进行任何更改，因此可能并不重要。

Answer 2

容器查询现在可能是最好的选择，具体取决于您的用例，并且所有主要浏览器都支持。请在此处查看支持级别：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;
  }
}