MinMaxing/ Understand vMin and vMax in the CSS

Translator: The omnipotent Xiao Fangfang

The original link

In previous articles (check them out here), I found useful CSS units: VW and VH. But the related units vmin and vmax are far less known and poorly understood. This is unfortunate, because they have some very novel use cases in Web development.

As I discussed earlier, 1vh is equal to 1% of the current ViewPort height (that is, the height of the open browser window), and 1vw is 1% of the current viewPort width. Vmin and vmax also use the same units, but respond to specific rules:

1. vimUse the ratio of the smallest side. That is, if the height of the browser window is less than its width,1vminWill be equivalent to the1vh; If the width of the browser is smaller than its height,1vminIs equivalent to1vw.
2. vmaxIt does the opposite: it uses the largest side. So when the viewport is wider than the height,1vmaxIs equivalent to1vw; If the browser is taller than it is wide,1maxWill be equivalent to the1vh.

Vim: Use window width with the smallest one in high school. Vmax: Use the largest one with window width and high school.

What can they be used for?

Vim and vmax are CSS oriented media queries (@media Screen and (orientation: portrait) or @Media Screen and (orientation: portrait). Landscape), because they respond immediately to the aspect ratio of the screen.

Keeping Hero text Under Control

I showed using VW units in header text earlier, but there is a significant problem with doing so: Text with VW units at a reasonable size at first gets out of control at very large or relatively small window sizes:

One solution is to use @media to query “Clamps” to set the minimum and maximum font sizes to complicate your CSS. Another approach is to set the font size value for the header to vmin.

h1 {
  font-size: 20vmin;
  font-family: Avenir, sans-serif;
  font-weight: 900;
  text-align: center;
}
Copy the code

When using vmin units, in a wide-screen and shrinking browser, the size of the header text will not become larger/smaller because the unit responds to the viewPort height. But if the viewport becomes narrower than its width — that is, if the page goes into portrait — the text will become larger or smaller, as demonstrated in the related CodePen demo.

Keeping Features Above The fold

A feature that starts at the top of the page and measures less than 100vh will always show “above the fold” (that is, it will always stay above the lowest edge of the viewwindow), but it will also show an unnecessary size in the partial aspect ratio. If the element’s min-height is used in vmax units instead, it will appear reasonably large in widescreen and relatively thin in narrow Windows:

header {
    background: #000;
    min-height: 8vmax;
}
Copy the code

This is combined with max-height to limit the height of elements in oversized window sizes.

Potential problems

There are a few things to note about Vmin and Vmax:

1. There are several historical bugs in mobile Safari support (hopefully addressed in the upcoming IOS 10). Rodney Rehm has an article called “BuggyFill” Fix for the Browser that addresses these issues.
2. Internet usevmInstead ofvminAnd is not supportedvmax. IE10+ supports standard units.

As I hope you can see, vmin and vmax do have some excellent uses; I hope they will find appropriate references in your work.

Photo by Richard Fraser, used under a Creative Commons license.