Schriftartskalierung basierend auf der Containergröße

Question

Es fällt mir schwer, das Problem der Schriftskalierung zu verstehen. Ich habe derzeit eine Website mit einer Schriftgröße für den Fließtext von 100 %. 100 % aber was? Dies scheint mit 16 Pixeln berechnet zu sein. Ich hatte zu 100 % den Eindruck, dass es sich irgendwie auf die Größe des Browserfensters bezog, aber anscheinend nicht, da es immer 16 Pixel beträgt, unabhängig davon, ob die Fenstergröße auf die Breite eines Mobilgeräts oder auf einen vollständigen Breitbild-Desktop geändert wird. Wie lässt sich Text auf einer Website im Verhältnis zum Container skalieren? Ich habe versucht, sie zu verwenden, aber auch das lässt sich nicht skalieren. Meine Argumentation ist, dass Dinge wie mein Menü gequetscht werden, wenn Sie die Größe ändern, sodass ich die .me-Datei verkleinern muss

P粉346326040 · Answer

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

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

示例 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;
  }
}

Schriftartskalierung basierend auf der Containergröße

Antworte allen(2)Ich werde antworten

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