CSS 函式 - max()

CSS 的max() 函式允許您指定從逗號分隔的表示式列表中最大的（最正）值作為 CSS 屬性值。

它適用於 <length>、<frequency>、<angle>、<time>、<percent>、<number> 或 <integer> 的值。

max() 函式接受一個或多個逗號分隔的表示式作為引數。這些表示式中最大的（最正）表示式值用作屬性值。
這些表示式可能包含算術運算、字面值或其他有效引數，例如 attr()。
它們還可以包含巢狀的 max()、min() 和 max() 函式。您可以選擇對每個值使用不同的單位，並在需要時使用括號來控制計算順序。

需要記住的要點

在表格列、列組、行、行組和單元格中使用百分比表示寬度和高度的數學表示式可以視為在自動和固定佈局表格中都指定了auto。
允許將min()和其他max()函式巢狀為表示式值。這些表示式是全面的數學表示式，允許直接進行加法、減法、乘法和除法，而無需使用calc()函式本身。
表示式可以由包含加法(+)、減法(-)、乘法(*)和除法(/)運算子的值組成，遵循運算子優先順序的標準規則。

重要的是在 + 和 - 運算元的兩側都包含一個空格。表示式中的運算元可以是符合語法的任何值。
組合min()和max()值或在clamp()或calc()函式中包含max()是可能的，而且通常是必要的。

語法

max( <calc-sum># )

雜湊(#)標記乘數表示實體可以重複一次或多次（例如，加號乘數），但每次出現都由逗號 (',') 分隔。

CSS max() - font-size

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">
This text has a minimum font size of 16px or 5% of the viewport width, whichever is larger.
</div>
<p>This is a sample text with a minimum font size of 1em or 5vw, whichever is larger.</p>
</body>
</html>

列印頁面