有多种方法可以将一些文本放入容器中并使用一些大小来填充该容器。
有不同的方法，例如使用 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 上：
使用 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 上：
使用 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.
输出：
- 在桌面上：
- 在 iPad 上：
