CSS MATH FUNCTIONS:

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!

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!

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: a

minimum value, a preferred value, and a

maximum allowed value.

h1 {

font-size: clamp(1.8rem, 3vw + lrem, 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 it's placed in a narrow column.

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.