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

时间:2016-03-20 19:19:20

标签: jquery css fonts each

大家好我正在研究小脚本,它应该采用任何容器的字体大小,这些容器有" .text" 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);
});

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

.text-1 {
  font-size: 6vh;
}
<div class="text-1">First Text</div>