How to set font size based on window size using JavaScript ?
Given an HTML document and the task is to change the font-size based on the size of the window with the help of JavaScript.
Approach 1:
- First convert the document element font sizes to em or % by using a function.
- Call this function on every resize of the window. It will change the font size based on window size.
Example: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> How to set font size based on container size using JavaScript? </title></head> <body style = "text-align:center;"> <h1 id = "h1" style = "color: green"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-weight: bold;"> </p> <script> var up = document.getElementById('GFG_UP'); var h1 = document.getElementById('h1'); up.innerHTML = "Resize the window to change" + "the font-size based on window-size"; h1.setFont = function (font) { var size = this.offsetWidth, font_size = size * font; this.style.fontSize = font_size + '%'; return this }; h1.setFont(0.50); window.onresize = function () { h1.setFont(0.50); } </script> </body> </html> |
Output:
- Before resizing the window:
- After resizing the window:
Approach 2: Use vw(viewport) unit with the font-size to convert the font-size with respect to the viewport.
Example: This example implements the above approach.
<!DOCTYPE HTML> <html> <head> <title> How to set font size based on container size using JavaScript? </title> <style> #h1 { font-size: 5vw; } </style></head> <body style = "text-align:center;"> <h1 id = "h1" style = "color: green"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-weight: bold;"> </p> <script> var up = document.getElementById('GFG_UP'); var h1 = document.getElementById('h1'); up.innerHTML = "Resize the window to change" + "the font-size based on window-size"; </script> </body> </html> |
Output:
- Before resizing the window:
- After resizing the window:
.png)
