CSS MATH FUNCTIONS:

CSS MATH FUNCTIONS:
Techiio-author
Written by Sagar RabidasJanuary 20, 2022
2 min read
CSS
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss 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.

HTML
HTML5
CSS
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-author
Sagar Rabidas
Software Developer
Techiio-followerTechiio-followerTechiio-followerTechiio-followerTechiio-follower
+8 more
300 Blog Posts
14 Discussion Threads
Trending Technologies
15
Software40
DevOps46
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance