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!

Leave a Reply

Your email address will not be published.