Html 引导根据屏幕大小调整文本大小

我正在我的

HTML

页面中使用

Bootstrap

，这一行有文本：

。选择您的颜色{
字体大小：72px；
字体系列：馅饼，无衬线；
字体大小：400；
字体风格：普通；
颜色：rgb（75,45,30）；
线高：1.2；
}

选择你的颜色

您可以根据视口宽度执行此操作。请查看此链接：

您可以使用以下代码

p{
保证金：0；
字体大小：calc（4vw+4vh+2vmin）；
}

虚拟文本

将字体大小从

px

更改为

vh

，然后相应地调整值。 我根据Enviro的建议编写了此代码

。选择您的颜色{
字体大小：6vh；
字体系列：馅饼，无衬线；
字体大小：400；
字体风格：普通；
颜色：rgb（75,45,30）；
线高：1.2；
}

选择你的颜色

当

字体大小

设置为

字体大小：72px时，则表示任何视口显示的字体大小都将设置为
72px

因此可以使用
vw


vw是视口宽度的1%

然后您可以编写一个类来定义响应文本：

.foo-text {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;    
    font-size: 3vw;
}

有两种方法可以使文本具有响应性：


可以使用vw单位设置文本大小，这意味着
视口宽度


。选择您的颜色{
字体大小：10vw；
字体系列：馅饼，无衬线；
字体大小：400；
字体风格：普通；
颜色：rgb（75,45,30）；
线高：1.2；
}

选择你的颜色