18910140161

HTML-如何使我的字体大小响应而不:根堆栈溢出

顺晟科技

2022-10-19 11:45:26

196

我有一个简单的博客模板

在我的样式文件中,我有这一行,当我删除它时,字体变得非常小,即使我认为我的样式中有这段代码,它使我的字体大小响应

当我使用这一行时,我得到以下输出

image1

这就是我删除它时得到的结果

image2

那么该代码到底是做什么的,如何在不使用的情况下获得相同的输出??


顺晟科技:

使用clamp()

类似的内容将响应视口宽度

字体大小:钳位(0.75 REM,0.875 REM+0.25 VW,1 REM);

参考: 基于视口使用CSS clamp()线性缩放font-size

您的所有字体大小都在。根据定义,基于根字体大小。

等于根元素的font-size的计算值。当在根元素的font-size属性上指定时,rem单位引用该属性的初始值。

删除该属性会改变...根目录字体大小。我相信默认情况是,但如果我错了,有人可以纠正我。这就是为什么它看起来小了25%。

要在不使用:root的情况下获得相同的效果,必须使用不同的单位--可能是百分比。百分比字体大小将引用具有固定字体大小的最近的父元素。您可以在body元素上定义固定的22px字体大小,然后让下面的所有内容使用百分比。所以1.1 REM将是110%。

下面是一个基本示例。

可以非常容易地制作响应字体,而不需要不必要的代码。 请使用以下公式:

图片来源

这是一个示例:

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航