Units of Measurement: Vmin and Vmax

Published December 1, 2016 by CSS Newbies.

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>