如何根据容器的宽度来改变字体大小

有各种方法可以将一些文本放在一个容器中，并有一些尺寸来填充该容器。
有不同的方法，如使用CSS和jQuery，下面将进行解释。

使用CSS属性（视口宽度）： vw是一个CSS属性，用于在HTML文件中创建响应式排版。视口是一个浏览器窗口的大小。文字大小 “可以用 “vw “单位来设置，你可以找到一个精确的数字，在这个数字中，文字相当贴合容器，并且在你调整浏览器窗口大小时不会中断。

1vw = 视口宽度的1%。如果视口是100厘米宽，1vw就是10厘米。

示例:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to change font size 
        depending on the width 
        of container?
    </title>
  
    <style>
        h1 {
            font-size: 8vw;
            color: green;
            font-weight: bold;
        }
  
        p {
            font-size: 3vw;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        Resize the browser window 
        to see how the font size 
        changes.
    </p>
</body>
  
</html>

输出:

On Desktop:
On iPad:

使用CSS属性（媒体查询）：你也可以使用媒体查询来改变一个元素在特定屏幕尺寸上的字体大小。@media规则，这使得为不同的媒体类型定义不同的样式规则成为可能。

示例:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to change font size 
        depending on width of 
        container?
    </title>
      
    <style>
        h1 {
            color: green;
        }
  
        @media screen and (min-width: 601px) {
            h1 {
                font-size: 80px;
            }
  
            p {
                font-size: 40px;
            }
        }
  
        @media screen and (max-width: 600px) {
            h1 {
                font-size: 40px;
            }
  
            p {
                font-size: 20px;
            }
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        Set the <em>font-size</em> of "h1" 
        to "40px" and <em>paragraph</em> to
        "20px", when the window's width is
        "600px" wide or less and when it 
        is "601px" or wider, set the 
        <em>font-size</em> to "80px" and
        <em>paragraph</em> to "40px". 
        Resize the browser window to 
        see the effect.
    </p>
</body>
  
</html>

输出:

On Desktop:
On iPad:

使用FitText jQuery插件：有一个jquery插件可以在响应式布局上使字体大小灵活，即FitText。例如，人们可以使用该插件来做与容器宽度有关的可伸缩的文本大小。

示例:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>H
        ow to change font size 
        depending on width of c
        ontainer?
    </title>
      
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        Resize the browser window 
        to see how the font size 
        scales.
    </p>
  
    <script type="text/javascript" src=
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/textFit.js">
    </script>
      
    <script type="text/javascript">
        textFit(document.querySelector("h1"));
    </script>
</body>
  
</html>

输出: