Change font size based on container height/width

Question

I'm trying to do simple jquery function:

<div id="container"><span>This is my text</span></div>

js code:

$(document).ready(function() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
});

css code:

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

It works when I change resize window and refresh it, but I'd like it to work continously, so when I resize browser window font-size is changing dynamically.

http://jsfiddle.net/8TrTU/1627/

Answer 1

You can add a handler on the window resize event and execute a new function update_fontsize which holds your fontsize magic:

var update_fontsize = function(){
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
};

$(window).resize(function() {
    update_fontsize();
});

$(document).ready(function() {
    update_fontsize();
});

Answer 2

Keep your code in a named function say - changeSize and call it in document.ready and window.resize as below:

DEMO

function changeSize(){
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);   
}

$(document).ready(function() {
    changeSize();
    $(window).resize(changeSize);
});

or just once in document.ready() as below:

$(document).ready(function() {
    $(window).resize(changeSize).trigger('resize');
});

Answer 3

Try using .resize function of jQuery

 var resizeFunction = function() { var fontSize = parseInt($("#container").width()/4)+"px"; $("#container span").css('font-size', fontSize); } $(document).ready(function() { resizeFunction(); }); $( window ).resize(function() { resizeFunction(); }); 

 * { font-family:Myriad Pro; } #container { height:100px; width:98%; background-color:#eeeeee; padding:1%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"><span>This is my text</span></div> 

Answer 4

 $(document).ready(function() { $(window).resize(function(){ var fontSize = parseInt($("#container").width()/4)+"px"; $("#container span").css('font-size', fontSize); }); var fontSize = parseInt($("#container").width()/4)+"px"; $("#container span").css('font-size', fontSize); }); 

 * { font-family:Myriad Pro; } #container { height:100px; width:98%; background-color:#eeeeee; padding:1%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"><span>This is my text</span></div> 

Answer 5

You can use $(window).resize event:

 $(window).resize(function() { var fontSize = parseInt($("#container").width()/4)+"px"; $("#container span").css('font-size', fontSize); }); 

 * { font-family:Myriad Pro; } #container { height:100px; width:98%; background-color:#eeeeee; padding:1%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"><span>This is my text</span></div> 

Answer 6

function resizeFont() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
}
$(document).ready(function() {
    resizeFont();
});
$( window ).resize(function() {
    resizeFont();
});

Try this code.

Answer 7

由于按大小调整事件会导致网页上的大量开销，因此，在这种情况下，我建议使用+value instead of parseInt()并caching the DOM elements ，以免再次选择它们，例如： http：// jsfiddle。净/ 8TrTU / 1631 /

Answer 8

This can be done using plain CSS, Take a look at this article:

https://css-tricks.com/viewport-sized-typography/

Also, look into using em or rem as font-sizes vs. px.

https://j.eremy.net/confused-about-rem-and-em/