Css Math Functions:
CSS MATH FUNCTIONS:
CALC(), CLAMP(), MIN(), MAX()
Calc().
Used for: performing basic math operations, with the ability to interpolate
between unit types (ex. rem to vw).
***
.section {
height : calc( 100vh – 60px);
}
Benefit: calc() allows you to avoid either hard-coding a range of magic
numbers or adding a JavaScript solution to calculate the value needed to
apply it as an inline style.
Clamp().
Used for: The clamp() CSS function clamps a value between an upper and lower bound.
clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: minimum value, a preferred value, and a maximum allowed value.
***
H1{
font-size: clamp(1.8rem, 3vw + 1rem, 4rem);
}
Benefit: An alternative for media-queries. Here, the font-size will be larger
when the element has more space on the page and smaller if its placed in a
narrow column.
Max().
Used for:
The max() function uses the largest value, from a comma-separated list of values, as the property value.
***
section {
margin-top : max:(8vh, 2rem);
}
Benefit: Responsive sizing without the need for media queries!
Min().
Used for: The min() function uses the smallest value, from a comma-separated
list of values, as the property value.
***
. section {
width: min(50%, 300px);
}
Benefit: Responsive sizing without the need for media queries!
