📜  如何根据容器的宽度更改字体大小?

📅  最后修改于: 2021-09-01 02:27:29             🧑  作者: Mango

有多种方法可以将一些文本放入容器中并使用一些大小来填充该容器。
有不同的方法,例如使用 CSS 和 jQuery,下面将进行说明。

使用 CSS 属性(视口宽度): vw是一个 CSS 属性,用于在 HTML 文件中创建响应式排版。视口是浏览器窗口大小。 “文本大小”可以设置为“vw”单位,您可以找到一个确切的数字,其中文本非常适合容器并且在调整浏览器窗口大小时不会中断。

1vw = 视口宽度的 1%。如果视口宽 100 厘米,则 1vw 为 10 厘米。

例子:



  

    
    
        How to change font size 
        depending on the width 
        of container?
    
  
    

  

    

Geeks for Geeks

       

        Resize the browser window          to see how the font size          changes.     

  

输出:

  • 在桌面上:
    桌面字体大小
  • 在 iPad 上:
    Ipad上的字体大小

使用 CSS 属性(媒体查询):您还可以使用媒体查询来更改特定屏幕尺寸上元素的字体大小。 @media规则,它可以为不同的媒体类型定义不同的样式规则。

例子:



  

    
    
        How to change font size 
        depending on width of 
        container?
    
      
    

  

    

Geeks for Geeks

       

        Set the font-size of "h1"          to "40px" and paragraph to         "20px", when the window's width is         "600px" wide or less and when it          is "601px" or wider, set the          font-size to "80px" and         paragraph to "40px".          Resize the browser window to          see the effect.     

  

输出:

  • 在桌面上:
    使用媒体查询在桌面上缩放字体
  • 在 iPad 上:
    使用媒体查询在 ipad 上缩放字体

使用 FitText jQuery 插件:有一个 jquery 插件可以使响应式布局上的字体大小FitText 。例如,可以使用该插件根据容器的宽度来调整文本大小。

例子:



  

    
    H
        ow to change font size 
        depending on width of c
        ontainer?
    
      
    

  

    

Geeks for Geeks

       

        Resize the browser window          to see how the font size          scales.     

                      

输出:

  • 在桌面上:
    使用 JQuery 插件缩放字体大小
  • 在 iPad 上:
    使用 JQuery 插件缩放字体大小