{"id":30172,"date":"2017-06-12T23:01:04","date_gmt":"2017-06-12T15:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30172"},"modified":"2018-04-09T16:51:15","modified_gmt":"2018-04-09T08:51:15","slug":"css-viewport-units-vw-vh-wmin-vmax","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-viewport-units-vw-vh-wmin-vmax\/","title":{"rendered":"Guide to CSS Viewport Units: vw, vh, vmin, vmax"},"content":{"rendered":"

Viewport-percentage lengths<\/strong>, or viewport units<\/strong> as they are more frequently referred to, are responsive CSS units that allow you to define dimensions as a percentage of the width or the length of the viewport<\/strong>. Viewport units can be quite useful in cases in which other responsive CSS units, such as percentages, are hard to make work<\/strong>.<\/p>\n

Although W3C\u2019s documentation<\/strong> on viewport units<\/a> contains everything that can be put into theory, it\u2019s not very verbose. So, in this article, we\u2019ll have a look at how these CSS units work in practice<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tGuide to CSS Grid Layout Fr Unit<\/a>\n\t\t\t\t<\/p>\n

Viewport height (vh<\/code>) & viewport width (vw<\/code>)<\/h2>\n

W3C defines viewport<\/a><\/strong> as \u201csize of the initial containing block\u201d. In other words, viewport is the area contained within the browser window<\/strong> or any other viewing area on a screen.<\/p>\n

The vw<\/code> and vh<\/code> units<\/strong> stand for the percentage of the width and height of the actual viewport. They can take a value between 0 and 100<\/strong> according to the following rules:<\/p>\n

\r\n100vw = 100% of viewport width\r\n1vw = 1% of viewport width\r\n\r\n100vh = 100% of viewport height\r\n1vh = 1% of viewport height\r\n<\/pre>\n
Differences to percentage units<\/h3>\n
So, how are viewport units different from percentage units? Percentage units inherit the size of their parent element<\/strong> while viewport units don\u2019t. Viewport units are always calculated as the percentage of the viewport size<\/strong>. As a result, an element defined by viewport units can exceed the size of its parent.<\/p>\n
Example: Full-screen sections<\/h3>\n
Full-screen sections<\/strong> are probably the most widely-known use cases of viewport units.<\/p>\n
The HTML is quite simple<\/strong>; we just have three sections under each other<\/strong> and we want each of them to cover the whole screen<\/strong> (but not more).<\/p>\n
\r\n<body>\r\n  <section class=\"section-1\"><\/section>\r\n  <section class=\"section-2\"><\/section>\r\n  <section class=\"section-3\"><\/section>\r\n<\/body>\r\n<\/pre>\n
In the CSS, we use 100vh<\/code> as a height<\/code> value and 100%<\/code> as width<\/code>. We don\u2019t use the vw<\/code> unit here as by default, scrollbars are also added<\/strong> to the viewport size. So, if we used the width: 100vw;<\/code> rule a horizontal scrollbar<\/strong> would appear at the bottom of the browser window<\/strong>.<\/p>\n
\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\nsection {\r\n  background-size: cover;\r\n  background-position: center;\r\n  width: 100%;\r\n  height: 100vh;\r\n}\r\n.section-1 {\r\n  background-image: url('https:\/\/assets.hongkiat.com\/uploads\/css-viewport-units-vw-vh-wmin-vmax\/img1.jpg');\r\n}\r\n.section-2 {\r\n  background-image: url('https:\/\/assets.hongkiat.com\/uploads\/css-viewport-units-vw-vh-wmin-vmax\/img2.jpg');\r\n}\r\n.section-3 {\r\n  background-image: url('https:\/\/assets.hongkiat.com\/uploads\/css-viewport-units-vw-vh-wmin-vmax\/img3.jpg');\r\n}\r\n<\/pre>\n
On the gif demo below, you can see that vh<\/code> is truly a responsive unit<\/strong>.<\/p>\n
\"Fullscreen<\/figure>\n
According to the W3C docs<\/a>, the aforementioned horizontal scrollbar issue<\/strong> can be solved by adding the overflow: auto;<\/code> rule to the root element. This solution only works partially<\/strong>, though. The horizontal scrollbar, indeed, disappears but width<\/code> is still calculated based on the viewport width<\/strong> (the sidebar included), so the elements will be slightly larger than they should be.<\/p>\n
I would say, I wouldn\u2019t dare use the vw<\/code> unit on sizing full-screen elements<\/strong> because of this reason. We don\u2019t even need it, as the width: 100%;<\/code> rule works perfectly. With fullscreen layouts, the real challenge has always been how to set a proper height value<\/strong> and the vh<\/code> unit gives a brilliant solution for that.<\/p>\n
Other use cases<\/h3>\n
If you are interested in other use cases vw<\/code> and vh<\/code><\/strong> Lullabot has a great article<\/a> that lists a handful of real-life examples<\/strong> (with Codepen demos), such as:<\/p>\n
    \n
  • Fixed-ratio cards.<\/li>\n
  • Keeping an element shorter than the screen.<\/li>\n
  • Scaling text.<\/li>\n
  • Breaking out of the container.<\/li>\n<\/ul>\n
    Opera.dev also has a short tutorial<\/a> on how you can take leverage of the vw<\/code> unit in creating responsive typography<\/strong>.<\/p>\n
    You can\u2019t only use viewport units on the width<\/code> and height<\/code> properties but on any other one. For instance, you can set the size of paddings and margins<\/strong> using the vw<\/code> and vh<\/code> units, too.<\/p>\n
    Viewport min (vmin<\/code>) & viewport max (vmax<\/code>)<\/h2>\n
    The vmin<\/code> and vmax<\/code> units allow you to access the size of the smaller or the larger side<\/strong> of the viewport, according to the following rules:<\/p>\n
    \r\n100vmin = 100vw or 100vh, whichever is smaller\r\n1vmin = 1vw or 1vh, whichever is smaller\r\n\r\n100vmax = 100vw or 100vh, whichever is larger\r\n1vmax = 1vw or 1vh, whichever is larger\r\n<\/pre>\n
    So, in case of a portrait orientation<\/strong>, 100vmin<\/code> is equal to 100vw<\/code>, as the viewport is smaller horizontally than vertically<\/strong>. For the same reason, 100vmax<\/code> will be equal to 100vh<\/code>.<\/p>\n
    Similarly, in case of a landscape orientation<\/strong>, 100vmin<\/code> is equal to 100vh<\/code>, as the viewport is smaller vertically than horizontally<\/strong>. And, of course, 100vmax<\/code> will be equal to 100vw<\/code> here.<\/p>\n
    Example: Make hero texts readable on every screen<\/h3>\n
    The vmin<\/code> and vmax<\/code> units are much less widely-known than vw<\/code> and vh<\/code>. However, they can be excellently used as a substitute for orientation @media<\/code> queries<\/strong>. For instance, vmin<\/code> and vmax<\/code> can come in handy when you have elements that may look strange at different aspect ratios<\/strong>.<\/p>\n
    The New Code has a great tutorial<\/a> in which they discuss how you can keep hero text readable<\/strong> on every screen, using the vmin<\/code> unit. Hero texts are prone to look too small on mobile and too big on large monitors<\/strong>.<\/p>\n
    Here is the main idea of their solution:<\/p>\n
    \r\nh1 {\r\n  font-size: 20vmin;\r\n  font-family: Avenir, sans-serif;\r\n  font-weight: 900;\r\n  text-align: center;\r\n}\r\n<\/pre>\n
    In the Codepen demo<\/a>, you can check out how vmin<\/code> solves the readability problem of hero texts. Access the \u201cFull Page\u201d view on Codepen, then resize your browser window<\/strong> both horizontally and vertically to see how the hero text changes.<\/p>\n