Changing font size on window resize

Question

Hi guys I am working on little script which should take font size of any container which have ".text" class and resize it accordingly to main container size changes (on resize). This is what I managed to come up with. But sadly this takes allready modified text and modifies it infinity times on resize.

So in general I need that this script would take all different fonts sizes and on window resize modify them only from original sizes which I defined in css.

I would be really grateful for any advices!!

$(".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 guys. I have managed to combine my idea and yours by using em with font size. Now I wont need to write many different media queries at least for font. I am also thinking to add extra "if" to update font not all the time on resize but by some margin.

Answer 2

If your font-size should be proportional to the screen size, then you can use vw and vh

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

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