基于容器宽度的字体缩放

Question

我很难理解字体缩放。

我目前有一个网站，其主体 font-size 为 100%。 100% 是什么？这似乎计算为 16 像素。

我的印象是 100% 会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口被调整到移动宽度还是完整的宽屏桌面，它总是 16 像素。

如何使网站上的文本相对于其容器进行缩放？我尝试使用 em ，但这也无法扩展。

我的理由是，当你调整大小时，我的菜单之类的东西会被压扁，所以我需要减少 px font-size 的 .menuItem 以及与宽度相关的其他元素的容器。 （例如，在大型桌面的菜单中， 22px 完美运行。向下移动到平板电脑宽度和 16px 更合适。）

我知道我可以添加断点，但我真的希望文本可以缩放 以及 有额外的断点，否则，我最终会在宽度每减少 100 像素时产生数百个断点来控制文本。

原文由 Francesca 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果容器不是主体，CSS Tricks 涵盖了将 文本放入容器 中的所有选项。

如果容器是主体，您正在寻找的是 Viewport-percentage lengths ：

视口百分比长度 与 初始包含块 的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。但是，当根元素上的溢出值为 auto 时，假定不存在任何滚动条。

这些值为：

• vw （视口宽度的百分比）
• vh （视口高度的百分比）
• vi （根元素内联轴方向的视口大小的1%）
• vb （根元素块轴方向的视口大小的1%）
• vmin （较小的 vw 或 vh ）
• vmax （较大或 vw 或 vh ）

1 v* 等于初始包含块的 1%。

使用它看起来像这样：

 p {
    font-size: 4vw;
}

如您所见，当视口宽度增加时， font-size 也会增加，而无需使用媒体查询。

这些值是一个大小单位，就像 px 或 em 一样，因此它们也可以用于调整其他元素的大小，例如宽度、边距或填充。

浏览器支持非常好，但您可能需要一个备用方案，例如：

 p {
    font-size: 16px;
    font-size: 4vw;
}

查看支持统计信息： http ://caniuse.com/#feat=viewport-units。

此外，查看 CSS-Tricks 以获得更广泛的外观： 视口大小的排版

这是一篇关于设置最小/最大尺寸和对尺寸进行更多控制的好文章： 精确控制响应式排版

这是一篇关于使用 calc() 设置大小以便文本填充视口的文章：http: //codepen.io/CrocoDillon/pen/fBJxu

另外，请查看这篇文章，该文章也使用了一种称为“熔融引导”的技术来调整行高。 CSS 中的领先地位

原文由 2507rkt3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

但是如果容器不是视口（body）怎么办？

亚历克斯在 接受的答案 下的评论中提出了这个问题。

该事实并不意味着 vw 不能在某种程度上用于该容器的大小。现在要看到任何变化，必须假设容器在某种程度上是灵活的。无论是通过直接百分比 width 还是通过 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;
}

Assuming here the div is a child of the body , it is 50% of that 100% width, which is the viewport size in this基本情况。基本上，您想设置一个 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 为例。 If the div was switched to 25% width by either @media or JavaScript, then at the same time, the font-size would need to adjust在媒体查询中或通过 JavaScript 计算新的 5vw * .25 = 1.25 。这将使文本大小与原始容器的“宽度”相同 50% 容器从视口大小减少了一半，但现在由于其自身的变化而减少了百分比计算。

一个挑战

使用 CSS3 calc() 功能，动态调整将变得困难，因为该功能不适用于 font-size 目的。因此，如果您的宽度在 calc() 上发生变化，您将无法进行纯 CSS 3 调整。当然，边距宽度的微小调整可能不足以保证 font-size 中的任何更改，因此这可能无关紧要。

原文由 ScottS 发布，翻译遵循 CC BY-SA 4.0 许可协议