Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. There are many ways to achieve this effect. But in this post we only focus on font-size and headlines.
CSS text does not scale automatically. To keep the text in size we need javascript support. First we measure the size of the parent element then we set the font-size accordingly.
get & set size
Normally you would call the changeFontSize() function in the onload() function. And get the scale factor from the viewport size.
In this case we get the scale factor from the text parent object. Since we don’t change the viewport size.
function changeFontSize() { //GET THE TEXT CONTAINER var wrapper = document.getElementById("wrapper"); //ADD ELEMENTS THAT SCALE WHIT PARENT var children = [wrapper.getElementsByTagName('h1'),wrapper.getElementsByTagName('h2'),wrapper.getElementsByTagName('h3')]; //SET THE SCALE FACTOR factor = wrapper.clientWidth / startWidth; //LOOP TROUGH EVERY ELEMENT for (var i=0;i<children.length;i++) { for (var j=0;j<children[i].length;j++) { //SET THE BASIC CSS VALUE children[i][j].style.fontSize = null; //GET ORIGINAL FONT-SIZE OF THE ELEMENT fontSize = parseInt( window.getComputedStyle( children[i][j], null ).getPropertyValue( 'font-size' ).replace('px','') ,10); //GET THE NEW FONT-SIZE fontSize = fontSize * factor; fontSize = fontSize.toFixed(2); //APPLY FONT-SIZE children[i][j].style.fontSize = fontSize +"px"; }; }; }
conclusion
This is a great technic to make your design more responsive. Easy to implement and no additional libraries needed. https://phonelookupbase.ca