Responsive viewport relative lengths
CSS Values and Units Module Level 3 (https://www.w3.org/TR/css3-values/#viewport-relative-lengths) ushered in viewport relative units. These are great for responsive web design, as each unit is a percentage length of the viewport:
- The
vwunit, where eachvwunit is 1% of the viewport width - The
vhunit, where eachvhunit is 1% of the viewport height - The
vminunit (for viewport minimum; equal to the smaller of eithervworvh) - The
vmax(viewport maximum; equal to the larger of eithervworvh)
Want a modal window that’s 90% of the browser height? This is, at least in theory, as easy as:
.modal {
height: 90vh;
}
Now, as useful as viewport relative units are, some browsers have had curious implementations. Safari in iOS, for example, changes the viewable screen area as you scroll from the top of a page (it shrinks the address bar), but crucially doesn’t make any changes to the reported...