您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

基于容器宽度的字体缩放

基于容器宽度的字体缩放

CSS Tricks将在“将 文本适合容器”中 涵盖您的所有选项。

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

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

值是:

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

使用它看起来像这样:

p {
    font-size: 4vw;
}

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

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

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

p {
    font-size: 16px;
    font-size: 4vw;
}
其他 2022/1/1 18:14:18 有530人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶