CSS Function - max()

The CSS max() function allows you to specify the largest (most positive) value from a list of comma-separated expressions as the CSS property value.

It is applicable to the values <length>, <frequency>, <angle>, <time>, <percent>, <number> or <integer>.

  • The max() function accepts one or more comma-separated expressions as parameters. The largest (most positive) expression value among these is used as the property value.

  • These expressions may contain arithmetic operations, literal values, or other valid arguments such as attr().

  • They can also contain nested max(), min() and max() functions. You have the option to use different units for each value and to use parentheses to control the order of calculations if needed.

Points to remember:

  • Mathematical expressions that use percentages for widths and heights in table columns, column groups, rows, row groups, and cells can be treated as if auto had been specified in both auto and fixed layout tables.

  • Nesting min() and other max() functions as expression values is allowed. These expressions are comprehensive mathematical expressions which allow direct addition, subtraction, multiplication and division without requiring the use of the calc() function itself.

  • The expression may consist of values containing addition (+), subtraction (-), multiplication (*), and division (/) operators, following the standard rules for operator precedence.

    It's important to include a space on each side of the + and - operands. The operands in the expression can be any values that conform to the syntax.

  • Combining min() and max() values or including max() in a clamp() or calc() function is possible and often necessary.

Syntax

max( <calc-sum># )

The hash (#) mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

CSS max() - font-size

The function max() can be utilized to enable font size growth while ensuring it remains above a specified minimum, facilitating responsive font sizes while maintaining readability.

The following example demonstrates the usage of max(). Resize the browser window to see the effect.

<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>
Advertisements