当我们使用 jQuery 调整窗口大小时，如何使字体大小扩大？

在本文中，我们将学习如何在使用 jQuery 调整窗口大小时增加或减小 HTML 中元素的字体大小。这可以用于字体大小必须根据浏览器窗口的宽度做出响应的情况。

方法：我们将使用 jQuery css()、width() 和 resize() 方法。由于必须根据窗口的大小调整字体大小，因此可以将resize() 方法应用于窗口对象。现在，必须在这个resize()方法中定义一个回调函数。在这个函数中，我们将使用$(*)选择器选择 HTML 文档中的所有元素。然后，我们将使用css() 方法修改 font-size 属性，并使字体大小相对于窗口宽度的百分比（以像素为单位）。当窗口大小调整大小时，此函数将重复执行。

示例：在本示例中，所有元素的字体大小都根据窗口宽度的 8% 进行调整。

HTML

  

    
    
  
    
    
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 25px;
        }
  
        p {
            font-weight: bold;
            font-size: 25px;
        }
    

  

    GeeksforGeeks
  
    
        Notice the scaling in font size
        as the window is resized
    
  
    
        $(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");
        });
    

  

输出：