有没有办法让文本大小随窗口大小而变化？ [复制]
Posted
技术标签:
【中文标题】有没有办法让文本大小随窗口大小而变化？ [复制]【英文标题】：Is there any way to have text size change with window size? [duplicate] 【发布时间】：2020-03-16 09:44:41 【问题描述】：我需要font-size 相对于窗口大小。有什么办法可以做到吗？
【问题讨论】：
当然...使用vw/vh单位或媒体查询。
【参考方案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（视图宽度/高度）。取决于屏幕尺寸。
你可以在这里CSS Units和https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent阅读更多
另一种方法是在不同的断点设置不同字体大小的媒体查询。 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:
【讨论】：
以上是关于有没有办法让文本大小随窗口大小而变化？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章