如何使用 JavaScript 根据窗口大小设置字体大小？

给定一个 HTML 文档，任务是在 JavaScript 的帮助下根据窗口大小更改字体大小。

方法一：

• 首先使用函数将文档元素字体大小转换为 em 或 %。
• 每次调整窗口大小时调用此函数。它将根据窗口大小更改字体大小。

示例：此示例实现了上述方法。

 
 
  
 
     
        How to set font size based on
        container size using JavaScript?
    

  
 
      
     
        GeeksForGeeks 
    
      
    
    
      
     
        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);
        }
     
 
  

输出：

• 在调整窗口大小之前：
  
• 调整窗口大小后：
  

方法 2：使用带有字体大小的vw(viewport) 单位来转换相对于视口的字体大小。

示例：此示例实现了上述方法。

 
 
  
 
     
        How to set font size based on
        container size using JavaScript?
    
      
    
        #h1 {
            font-size: 5vw;
        }
    

  
 
      
     
        GeeksForGeeks 
    
      
    
    
          
     
        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";
     
 
  

输出：

• 在调整窗口大小之前：
  
• 调整窗口大小后：