Horje
How to make font-size that expands when we resize the window using jQuery ?

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:


 


Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
CoffeeScript Class Method CoffeeScript Class Method
How to reverse array of DOM elements using jQuery ? How to reverse array of DOM elements using jQuery ?
How to break forEach() method in Lodash ? How to break forEach() method in Lodash ?
How to Create a Child Theme in WordPress? How to Create a Child Theme in WordPress?
What is BlogVault plugin in WordPress ? What is BlogVault plugin in WordPress ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje