基于容器宽度的字体缩放

Question

我很难理解字体缩放。

目前，我有这个网站与身体font-size的100％。不过是100％这似乎可以计算出16个像素。

我给人的印象是100％会以某种方式引用浏览器窗口的大小，但是显然不是因为将窗口缩小到移动宽度还是全屏宽屏桌面总是16像素。

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

我的理由是，当你调整，这东西像我的菜单中就被压扁，所以我需要降低px font- size的.menuItem相对其它元素的容器的宽度之中。（例如，在大型桌面上的菜单中，22px效果很好。向下移动至数位板宽度16px比较合适。）

我知道我可以添加断点，但是我确实希望文本能够缩放 以及 具有额外的断点，否则我将每减少100像素的宽度就会得到数百个断点来控制文本。

Answer 1

编辑：如果容器不是正文， CSS Tricks将在“将 文本适合容器”中 涵盖您的所有选项。

如果容器是主体，则您要查找的是视口百分比长度：

该 视口百分比长度是相对于的尺寸初始包含块。更改初始包含块的高度或宽度时，将对其进行相应缩放。但是，当根元素上的溢出值为auto时，则假定不存在任何滚动条。

值是：

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

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

使用它看起来像这样：

p {
    font-size: 4vw;
}

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

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

浏览器支持相当不错，但是您可能需要一个备用，例如：

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