如何获得使用maxCSS函数逐渐改变类型比例的流畅排版？

问题描述

我非常喜欢流体字体，我希望我正在开发的网站能够采用它。最近，我了解了max() CSS函数。我想到了用它来获得流畅的版式。特别是，我希望网页上的文本从特定的字体比例开始，然后采用不同的字体比例。具体来说，我希望文本在较小的起始视口上使用次三刻度。当视口变大时，我希望文本改用“ Perfect Fifth”比例。我想得到一个类似Utopia的结果。在此处，指定要在不同视口上使用的两个类型比例。我想复制相同的效果，但是只使用max()函数，因为我不想提供“最大视口”：我的文字必须无限缩放。到目前为止，我已经尝试使用以下代码：

    <!DOCTYPE html>
    <html>
    <head>
       <meta name="viewport" content="width=device-width,initial-scale=1.0">
       <style>
          h1   { font-size: max(2.488rem,11.089vw); }
          h2   { font-size: max(2.074rem,6.854vw); }    
          h3   { font-size: max(1.728rem,4.236vw); }
          h4   { font-size: max(1.44rem,2.618vw); }
          h5   { font-size: max(1.2rem,1.618vw); }
       </style>
    </head>
    <body>
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
       <h4>Heading 4</h4>
       <h5>Heading 5</h5>
    </body>
    </html>

此代码的作用是为每个标题使用max()函数，其第一个成员是由次要第三等级定义的等级，而第二个成员是由完美第五等级定义的等级。要查看我要执行的操作，请在运行上面的代码段后尝试调整视口的大小，您会看到航向正在改变比例。我不知道这段代码是否完全符合我想要达到的目的（即从一个标尺切换到另一个标尺），但似乎可以做到。但是，我要避免的是例如h1和h2元素在调整视口大小时发生变化的间隔。具体来说，h1开始采用新的标度，先于。这是有道理的，因为计算出的两个最大值不同，但是我希望所有标题同时开始采用新的比例，即在我调整视口大小时。

解决方法

以下是使用媒体查询的方法：

h1 {
  font-size: max(2.488rem,11.089vw);
}

h2 {
  font-size: max(2.074rem,6.854vw);
}

h3 {
  font-size: max(1.728rem,4.236vw);
}

h4 {
  font-size: max(1.44rem,2.618vw);
}

h5 {
  font-size: max(1.2rem,1.618vw);
}


/* tablet */

@media (min-width: 768px) {
  h1 {
    font-size: max(3.488rem,16.089vw);
  }
  h2 {
    font-size: max(3.074rem,11.854vw);
  }
  h3 {
    font-size: max(2.728rem,9.236vw);
  }
  h4 {
    font-size: max(2.44rem,7.618vw);
  }
  h5 {
    font-size: max(2.2rem,5.618vw);
  }
}


/* large screens and up */

@media (min-width: 1200px) {
  h1 {
    font-size: max(4.488rem,30.089vw);
  }
  h2 {
    font-size: max(4.074rem,18.854vw);
  }
  h3 {
    font-size: max(3.728rem,16.236vw);
  }
  h4 {
    font-size: max(3.44rem,14.618vw);
  }
  h5 {
    font-size: max(3.2rem,10.618vw);
  }
}

<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
</body>

</html>

我为增加字体大小计算了数字，您可以添加更多浏览器视口中断大小，甚至使用rem值代替px。

最后，我发现最好的解决方案是使用类似的东西：

:root {
 --step6:calc(1.602rem + 5.063vw);
 --step5:calc(1.424rem + 3.375vw);
 --step4:calc(1.266rem + 2.25vw);
 --step3:calc(1.125rem + 1.5vw);
 --step2:calc(1rem + 1vw);
 --step1:calc(0.889rem + 0.667vw);
 --step0:calc(0.79rem + 0.444vw)
}

我使用这些CSS变量来指定元素的大小，并无限期地缩放文本，而无需使用媒体查询来指定设计应更改的精确点。仅使用这些变量就可以达到我想要的效果。例如，h1元素可以使用：

h1 { font-size:var(--step6) }

和一个h2元素：

h2 { font-size: var(--step5) }

这让我说：«我只提供最小值。当视口长大时，我希望使用此比率无限期缩放尺寸»。当然，我不仅将这些变量与字体大小一起使用，还与其他属性（例如页边距，填充等）一起使用。

font-size html typography viewport-units

如何获得使用maxCSS函数逐渐改变类型比例的流畅排版？

问题描述

解决方法

相关问答