CSS Math Functions

CSS math functions allow you to perform calculations directly within your styles. These functions make it easier to create dynamic, flexible layouts and designs without relying on external tools or manual calculations.

Common CSS Math Functions

  1. calc(): Performs basic arithmetic operations (+, -, *, /).Syntax: 
    width: calc(expression);

    Try It Now

    Example:

    width: calc(100% - 50px);
font-size: calc(16px + 2vw);

    Try It Now

  2. min(): Chooses the smallest value from a list of values.Syntax: 
    width: min(value1, value2, ...);

    Try It Now

    Example:

    width: min(50%, 300px);

    Try It Now

  3. max(): Chooses the largest value from a list of values.Syntax: 
    width: max(value1, value2, ...);

    Try It Now

    Example:

    width: max(50%, 200px);

    Try It Now

  4. clamp(): Sets a value within a defined range (minimum, preferred, maximum).Syntax: 
    width: clamp(min, preferred, max);

    Try It Now

    Example:

    font-size: clamp(16px, 2vw, 24px);

    Try It Now

Examples

1. Using calc() for Dynamic Width

<div style="width: calc(100% - 50px); background-color: lightblue;">
  Box with width calculated as 100% minus 50px
</div>

Try It Now

2. Using min() for Responsive Design

<div style="width: min(50%, 300px); background-color: lightgreen;">
  Box with width limited to 50% or 300px, whichever is smaller
</div>

Try It Now

3. Using max() for Minimum Size

<div style="width: max(200px, 20%); background-color: lightcoral;">
  Box with width at least 200px or 20%, whichever is larger
</div>

Try It Now

4. Using clamp() for Font Sizes

<p style="font-size: clamp(16px, 2vw, 24px);">
  This text adjusts its size between 16px and 24px based on the viewport width.
</p>

Try It Now

How Math Functions Work Together

Responsive Layout with calc() and clamp()

<style>
  .responsive-box {
    width: clamp(200px, 50%, 600px);
    height: calc(100px + 10vh);
    background-color: lightyellow;
  }
</style>
<div class="responsive-box">
  Responsive Box
</div>

Try It Now

Best Practices

  1. Fallbacks:
    • Test math functions in older browsers that may not support them.
    • Use feature queries (@supports) if needed: 
      @supports (width: clamp(200px, 50%, 600px)) {
  .box {
    width: clamp(200px, 50%, 600px);
  }
}

      Try It Now

  2. Combine with Variables:
    • Use custom properties (CSS variables) for flexibility: 
      :root {
  --base-size: 16px;
}
p {
  font-size: calc(var(--base-size) * 1.5);
}

      Try It Now

  3. Optimize for Readability:
    • Keep expressions simple and well-commented for maintainability.

Experiment

Try this example:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: calc(100% - 20px);
      height: clamp(100px, 10vw, 200px);
      background-color: lightblue;
      margin: 10px auto;
      text-align: center;
      line-height: clamp(100px, 10vw, 200px);
      font-size: clamp(16px, 2vw, 24px);
    }
  </style>
</head>
<body>
  <div class="box">Responsive Box</div>
</body>
</html>

Try It Now

This example dynamically adjusts the box size and font size based on the viewport width. Experiment with it to see how CSS math functions simplify responsive design!