How to increase font size based on window width by using jQuery and CSS

0 Shares
0
0
0
0
0
0
0

Increase font size based on window width of Browser by using jQuery and CSS as per the Screen Resolutions

Add below CSS

<style type="text/css">
body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */
body.extraWide {font-size:85%;}
body.wide {font-size:75%;}
body.narrow {font-size:50%;}
body.extraNarrow {font-size:40%;}
</style>

and add jQuery with the support of a set timeout so it would scale in real-time. It doesn’t reverse scale though.

$(document).ready(function() {scaleFont();});
function scaleFont() {
var viewPortWidth = $(window).width();
if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')}
else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')}
else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')}
else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')}
else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')}
setTimeout(scaleFont, 100);
}

or you can use it resizes only if the window is resized (avoiding setTimout), and you give body only the exact class it needs

$(document).ready(function() {
      scaleFont();
});
$(window).resize(function() {
      scaleFont();
});
function scaleFont() {
var viewPortWidth = $(window).width();
if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');}
	else if (viewPortWidth >= 1400) {$('body').attr('class','wide');}
	else if (viewPortWidth >= 1000) {$('body').attr('class','');}
	else if (viewPortWidth >= 700) {$('body').attr('class','narrow');}
	else {$('body').attr('class','extraNarrow');}
}

Sources: Click Here