如何在 Materialise 中使字体大小响应答案

【问题标题】：How to make font sizes responsive in Materialize如何在 Materialise 中使字体大小响应
【发布时间】：2020-04-27 04:28:04
【问题描述】：

我在具体化中遇到字体大小问题。如果我的客户端设备变得更小，则文本大小没有响应并且它们太小了。一种解决方案是对每个客户端设备使用@media 查询。这不是我的解决方案，因为物化本身有媒体查询，我不想再次重写它们。有什么方法可以使文本响应具体化？谢谢

【问题讨论】：

标签： css fonts media-queries materialize responsive

【解决方案1】：

可能是font-size:5vw，其中 5 是视口的 5%。或者vw的每个单位是视口宽度的1%

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <body>
        <div style="font-size:5vw;text-align:center;">This is Some Responsive Text</div>
    </body>
</html>

【讨论】：

您给了我们解决这个问题的钥匙。效果很好。

【解决方案2】：

谢谢约翰！

我创建这个插件是为了使用 materialize 来促进字体大小：

/*  fontSize: */
.xs   {font-size: 0.75rem}
.sm   {font-size: 0.875rem}
.base {font-size: 1rem}
.lg   {font-size: 1.125rem}
.xl   {font-size: 1.25rem}
.2xl  {font-size: 1.5rem}
.3xl  {font-size: 1.875rem}
.4xl  {font-size: 2.25rem}
.5xl  {font-size: 3rem}
.6xl  {font-size: 4rem}
.fs1  {font-size: 1vw}
.fs2  {font-size: 1.4vw}
.fs3  {font-size: 1.6vw}
.fs4  {font-size: 1.8vw}
.fs5  {font-size: 2vw}
.fs6  {font-size: 2.2vw}
.fs7  {font-size: 2.4vw}
.fs8  {font-size: 2.6vw}

% font-size 的独特问题是，从移动设备（太小）到大屏幕（太大）的文本大小变化太大

【讨论】：

这很完美，投了赞成票。这建立在约翰的想法上，对我来说很方便。