CSS Tricks将在“将 文本适合容器”中 涵盖您的所有选项。
如果容器是主体,则您要查找的是视口百分比长度:
该 是相对于的尺寸初始包含块。更改初始包含块的高度或宽度时,将对其进行相应缩放。但是,当根元素上的溢出值为auto时,则假定不存在任何滚动条。
值是:
1 v *等于初始包含块的1%。
使用它看起来像这样:
p {
font-size: 4vw;
}
如您所见,当视口宽度增加时,字体大小也会增加,而无需使用媒体查询。
这些值是一个大小单位,就像px
或一样em
,因此它们也可以用于调整其他元素的大小,例如宽度,边距或填充。
p {
font-size: 16px;
font-size: 4vw;
}