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: