Viewport-Relative Length Units
As mentioned previously, one problem with using percentages for widths is the fact that they’re relative to their parent elements; that may not seem like a problem at first, but it can soon become quite complex. A better approach is to use a unit that’s relative to a fixed value, rather than a value inherited from a parent; this is what the vh and vw units are for.
The v stands for viewport, and you may then be able to extrapolate that h is for height and w for width. In other words, this unit is relative to the dimensions of the viewport. Each number you use with this value is equal to 1 percent of the respective length of the viewport. So to make an element that’s half the height of the viewport use this:
E { ...Get The Modern Web now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
