CSS 函数

CSS max() 函数允许您从逗号分隔表达式列表中指定最大(最正)值作为 CSS 属性值。

它适用于值 <angle><time><percent><number><integer>

  • max() 函数接受一个或多个逗号分隔的表达式作为参数。其中最大(最正)的表达式值用作属性值。

  • 这些表达式可能包含算术运算、文字值或其他有效参数,例如 attr() .

  • 它们还可以包含嵌套的 max()、min() 和 max() 函数。您可以选择为每个值使用不同的单位,并根据需要使用括号来控制计算顺序。

要记住的要点:

  • 在表列、列组、行、行组和单元格中使用宽度和高度百分比的数学表达式可以被视为在自动布局表和固定布局表中指定了 auto 。

  • 允许将 min() 和其他 max() 函数嵌套为表达式值。这些表达式是综合数学表达式,允许直接加法、减法、乘法和除法,而不需要使用 calc() 函数本身。

  • 表达式可以由包含加法的值组成(+)、减法 (-)、乘法 (*) 和除法 (/) 运算符,遵循运算符优先级的标准规则。

    在 + 和 - 两侧各包含一个空格,这一点很重要。表达式中的操作数可以是符合语法的任何值。

  • 组合 min() 和 max() 值,或者在clamp() 或 calc 中包含 max() () 函数是可能的,而且常常是必需的。

语法

max( <calc-sum># ) 

散列 (#) 标记乘数表示实体可以重复一次或多次次(例如,加号乘数),但每次出现都用逗号 (',') 分隔。

CSS max(): 字体大小

函数 max( ) 可用于实现字体大小增长,同时确保其保持在指定的最小值以上,从而在保持可读性的同时促进响应字体大小。

以下示例演示了 max() 的用法。调整浏览器窗口大小即可查看效果。

<html>
<head>
<style>
   .text {
      font-size: max(16px, 5vw); 
      background-color: lightgray;
      padding: 20px;
      margin: 20px;
   }
   p {
      font-size: max(1em, 5vw);
      background-color: yellow;
      padding: 20px;
      margin: 20px;
   }
</style>
</head>
<body>
<div class="text">
此文本的最小字体大小为 16 像素或视口宽度的 5%(以较大者为准)。
</div>
<p>这是一个示例文本,最小字体大小为 1em 或 5vw(以较大者为准)。</p>
</body>
</html>