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.
html
< 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 >
|
Output:
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 viewport approach.
html
< h1 style = "color: green; font-size: 5vw;" >
GeeksForGeeks
</ h1 >
< p id = "GFG_UP" style = "font-weight: bold;" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
up.innerHTML = "Resize the window to change"
+ "the font-size based on window-size";
</ script >
|
Output:
Last Updated :
21 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...