vmin and vmax
While vh and vw are related to the viewport's height and width, vmin and vmax are related to the minimum and maximum of these values. It does depend on which is larger or smaller.
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.
Create a free account to view this lesson.
By signing up, you agree to Educative's Terms of Service and Privacy Policy