Question

大家好我正在研究小脚本，它应该采用任何容器的字体大小，这些容器有＆＃34; .text＆＃34; class并根据主容器大小的变化调整大小（在调整大小时）。这就是我设法提出的。但遗憾的是，这需要经过修改的文本并在调整大小时修改无限时间。

所以一般来说我需要这个脚本会采用所有不同的字体大小，并且在窗口调整大小时只修改我在css中定义的原始大小。

我会非常感谢任何建议!!

$(".text").each(function() {
    // getting how many times original size of container changed 
    var starter_height = $('#wrapper').height();
    var height_change = starter_height/602;

    totalHeight =  parseInt($(this).css('font-size'));
    $(this).css({"font-size": totalHeight * height_change + "px"});
    console.log(totalHeight);
});

Answer 1

Thx伙计们。我已经设法通过使用字体大小的em来结合我的想法和你的想法。现在我不需要至少为字体编写许多不同的媒体查询。我也想添加额外的＆＃34;如果＆＃34;不是在调整大小时更新字体，而是以一定的余量。

Answer 2

如果您的font-size应与屏幕尺寸成比例，那么您可以使用vw and vh

.text-1 {
  font-size: 6vh;
}

<div class="text-1">First Text</div>

在窗口调整大小时更改字体大小

2 个答案: