MENU


Numerical Functions

Numerical CSS values can be computed on-the-fly across different units:

calc(arithmetic expression)

min(value1, value2, value3...)

max(value1, value2, value3...)

clamp(min, value, max)

These CSS functions can be used to position elements precisely on screens of different sizes.
RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   div{
      background: red;
      margin: 3vw;
      border: 2px dotted yellow;
      width: calc(100% - 2 * (3vw + 2px));
      height: clamp(100px, 70vh, min(300px,300em,400ch));
   }
</style>
</head><body>
   <div></div>
</body></html>

For compatibility reasons, try to space out the numbers and operators such as + - * /.