Units of Measurement: Vmin and Vmax

In CSS there are so many different units that can be used to define the size of your HTML elements. There are fixed units, like px, cm, in, etc, and then there are relative units, like em, rem, vh and vw. Some less popular units (but still just as useful) are vmin and vmax. The units are used to define the size of HTML elements relative to the dimensions of the viewport.

The vmin unit of measurement represents 1% of the smaller viewport dimension (either vh or vw, whichever is smaller). The vmax unit of measurement represents 1% of the larger viewport dimension (either vh or vw, whichever is larger. Here’s an example of how you’d use it in your CSS stylesheet:

Join us in our newest publication:
p{
   font-size: 1vmin;
}

This property isn’t widely used, partly because in order to use it both vh and vw must be defined, and those also aren’t widely used, and partly because it isn’t supported by Internet Explorer. It is however, a very useful property to take advantage of, especially in responsive design.

Share and Enjoy !

0Shares
0 0