vmin and vmax
Explore how to use vmin and vmax CSS units to build responsive web designs that adapt to different screen sizes. Understand how these units represent the smallest and largest viewport dimensions, enabling more precise and flexible layout control.
We'll cover the following...
We'll cover the following...
If we had a screen size of 750px by 300px, which is the larger of these values?
750px of course. Everyone knows that :-)
In this case 100vmax would represent the 750px, the larger of the viewport’s dimensions.
100vmin also would represent 300px, the smaller of the viewport’s dimensions.
Below is a simple illustration to buttress this point.
The illustrations above are cool, right? Self explanatory.
It took some time to make those for you. I hope they help you understand things better.