Let's play with CSS measurements 🐱

We missed you

Hello there! My apologies for being so late, but I have been not well lately. Doc told me, "You're taking on too much stress:" Nonsense. I am following everything this great blog says.

Anyways getting back to units(CSS units), what there are more units then px, % ?🤯.

I know it might sound surprising but there's an abyss out there. Don't worry, we're just scratching the surface today, but rest assured it's more than enough.

Before we start I would like to thank @matthias for this amazing post which inspired me for this post.

Blow my mind🎉

vmin

1vmin = 1% of viewport's smaller dimension

Imagine a box, an honest box made using vmin property(100vmin) placed inside a container and that container can grow as much as it wants. And when we feed food to that container the box eats all the food so what does the container do? It grows more, but the box cannot grow larger than the initial size. Finally, the container gets to eat the food, and once the container is full, it decides to shrink below its initial size, and so does the honest box.

A vmin unit shrinks with the device viewport, but cannot grow beyond the initial size of the viewport.

Browser support- only Opera Mini doesn't support it.

Note- Don't forgot to take margin and padding into account as they also affects the final size.

Play here

vmax

1vmax = 1% of viewport's larger dimension

Imagine a box, very greedy box made using vmax property(100vmax) placed inside a container and it can grow anytime it wants. And when we feed food to that container that greedy box eat all the food, so the container grows in hope of getting some food but the greedy box also expands with it. Now the container is very hungry so what does it do? It shrinks below its initial size, but the greedy box can't shrink below container's initial size and breaks, finally container gets to eat the food.

A vmax unit expands with the device viewport expands but cannot shrink below the initial device viewport size.

Browser support- only Opera Mini doesn't support it.

Note- Don't forgot to take margin and padding into account as
they will affect final size.

Play here

Percentage

Imagine a box, a magical box made using percentage property(100%) placed inside a container and that container can grow/shrinks anytime it wants. And when we feed food to that container that magic box eat all the food what does the container do it grows more and so does the box. Now the container is very hungry so now it shrinks below its initial size, and the box also shrink below container's initial size, and the container dies of hunger end of story.

A percentage(%) unit can expands as the device viewport expands and can also shrink as the initial device viewport window shrinks. But be careful if you decide to use it.

Why?

The results will differ from browser to browser as they all uses different approach calculating units.

Try setting the height of parent div with (%) and see what happens.

Play here

Tell me more

This will be a series, more blogs are coming with some great stuff, make sure you're follow me.

Hey you got something wrong🐱

Please let me know if there's anything I can improve, I am always eager to learn more.

You are Awesome where can I Connect with you😎?

🚀Github

🌱Instagram

📨[Email] - [e-mail]

🐦[Twitter]- Soon

How can I show my appreciation for your work✨

You can share your love below in the comments, connect with me on other platforms and you can also buy me a coffee😻.

Thanks.