有没有办法让文本大小随窗口大小而变化？ [复制]答案

【问题标题】：Is there any way to have text size change with window size? [duplicate]有没有办法让文本大小随窗口大小而变化？ [复制]
【发布时间】：2020-03-16 09:44:41
【问题描述】：

我需要font-size 相对于窗口大小。有什么办法可以做到吗？

【问题讨论】：

【解决方案1】：

响应式字体大小可以使用 vw 单位设置文本大小，即“视口宽度”。使用 vw 代替 px 或其他单位

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>

【讨论】：

【解决方案2】：

您可以使用几种类型的值。除了使用px，您还可以使用vw 或vh（视图宽度/高度）。取决于屏幕尺寸。

另一种方法是在不同的断点设置不同字体大小的媒体查询。 https://css-tricks.com/books/volume-i/scale-typography-screen-size/

如果您想根据容器的大小进行缩放，那么有一些库可以做到这一点。例如FitText

【讨论】：

【解决方案3】：

在你的 css 文件中做：

:root { font-size: <your desired default size in absolute units> }

然后，每当您在文件中的其他位置设置 font-size 属性时，您都希望使用 rem 测量值（例如，如果在 :root font-size 为 24px，1rem 表示 24px）。

然后只需在您重新定义的地方添加媒体查询 :root {font-size: }

【讨论】：