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
