Javascript 响应式字体大小

我一直在想一种方法，随着父元素大小的变化来改变字体大小。这很可能是由于浏览器大小的改变。例如，当我把我的Chrome浏览器变小时，字体也会变小，反之亦然

我在考虑媒体的提问，但这也不符合我的确切要求。媒体查询非常适合检测正在使用的设备以及所有设备，但不适合检测我想要的设备。我认为答案在于某种JavaScript，但是如果有一个答案使用CSS，我更喜欢它。我做了一些研究，但找不到我想要的确切内容。

这里有一个很好的插件，它正好可以使用mediaqueries。 我将此用于我的测试：

选择的大小可能不是最好的，转换是为了避免在调整窗口大小时将大小跳到大小

---

玩得开心

所有插件都是垃圾。只需尝试使用简单的css即可

例如：

@media screen and (min-width: 1200px){
font-size:80%;
}

@media screen and (max-width: 768px){
font-size:90%;
}

@media screen and (max-width: 320px){
font-size:80%;
}

---

它们在每个视口上都是灵活的。希望这对您有所帮助。

适合大字体的文本插件非常有趣。如果你正在考虑文本和段落字体，这可能不是最好的解决方案

媒体查询解决方案是最常用的方法，不过也有一种称为响应式排版的技术，即字体大小不是按预定步骤变化的，而是随着wiewport的变化而逐渐变化的

基本上，您可以根据字体的父元素的百分比来调整字体的大小，例如字体宽度的百分比。我所知道的关于这项技术的最好描述是

---

祝你好运

您可以使用CSS3

vh

、

vw

、

vmin

和

vmax

新值作为响应字体

1vw=视口宽度的1%

1vh=视口高度的1%

1vmin=1vw或1vh，以较小者为准

1vmax=1vw或1vh，以较大者为准

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

---

更多详细信息：

我已经试过了。我试图调整浏览器大小的原因字体大小没有改变。我想是因为max width检测的是它的可用宽度，而不是浏览器宽度的“现在”大小。

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}