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.



This is a great technic to make your design more responsive. Easy to implement and no additional libraries needed.