基于容器宽度的字体缩放

基于容器宽度的字体缩放

编辑：如果容器不是正文， 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;}