How to make font-size that expands when we resize the window using jQuery ? Last Updated : 05 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will learn how to increase or decrease the font-size of elements in HTML when the window is resized using jQuery. This can be used in situations where the font size has to be responsive according to the width of the browser window.Approach: We will be using the jQuery css(), width() and resize() methods. As the font size has to be changed according to the resizing of the window, the resize() method can be applied to the window object. Now, a callback function has to be defined within this resize() method. Inside this function, we will select all elements in the HTML document using the $(*) selector. We will then modify the font-size property using the css() method and make the font-size relative to a percentage of the window width in pixels. This function will get repeatedly executed when the window size resizes.Example: In this example, all the element font sizes are adjusted according to 8% of the window width. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <!-- Basic inline styling --> <style> body { text-align: center; } h1 { color: green; font-size: 25px; } p { font-weight: bold; font-size: 25px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <p> Notice the scaling in font size as the window is resized </p> <script type="text/javascript"> $(window).resize(function () { // Calculate the final font size // to be 8% of the window width let size = $(window).width() * 0.08; // Use the css() method to set the // font-size to all the elements on // the page $("*").css("font-size", size + "px"); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to make font-size that expands when we resize the window using jQuery ? R rajatsandhu2001 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to get the size of screen, current web page and browser window using jQuery? jQuery can be used to get the dimensions of the current page. The dimensions include the screen, viewport and document height, and width. Getting the window dimensions: Window size is the size of the browser window. This is the size that changes when the browser is resized. The windows height and wi 2 min read How to detect when the window size is resized using JavaScript ? Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScriptThe window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in 3 min read How to trigger the window resize event in jQuery ? To discuss how to trigger the window resize event using jQuery. For this purpose, we will use the following library functions provided by jQuery.$(<element>).trigger(): This library function allows us to trigger both native and customized events. The method can be used independently or can be 1 min read 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 1 min read How to change font size using jQuery ? In this article, we will see how to change the font size of an element using jQuery. To change the font size of an element, we will use css() method. The css() method is used to change the style property of the selected element. Syntax: $(selector).css(property) Return value: It will return the valu 1 min read Like