Check out a free preview of the full CSS In-Depth, v2 course:
The "rem & Viewport Width" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Lengths and font sizes can be declared relative to the root em size or the width or height of the actual viewport with rem, vh, vw, vmin and vmax.

Get Unlimited Access Now

Transcript from the "rem & Viewport Width" Lesson

>> Estelle Weyl: A rem unit which, is root unit,has been around for a really long time, but people still aren't using it cuz IE 8 didn't support it. But you can just basically declare a font-size on your colon root, and when we talked about selectors, we talked about this yesterday.

[00:00:22] And then basically, every time you declare a rem unit, it's relative to that root unit. So basically inherits from it's parent, so you'll end up with really weird sizes by accident, when you use instead of rem. And rem basically takes care of that. Then we had the viewport width, viewport height, viewport minimum and viewport maximum.

[00:00:49] So if I say 5vw, that means 5% of the width of the viewport. If I say 7vh it means 7% of the height of the view port. If I say 4vmin, it means find 4% of the height and 4% of the width. Whichever one is smaller, use that.

[00:01:08] If I say 8vmax, it says okay, 8% of the viewport height, and 8% of the viewpoint width, whichever is larger, use that one. Vmax I think doesn't work in IE or Edge, but the other ones work everywhere. Under consideration are two other units which are vi and vb.

[00:01:26] They're really not being used yet at all, I don't think. But I want to include it just in case this video lasts for like four or five years, and maybe it will come out. Which is vi is 1% of the containing block in the direction of the inline axis.

[00:01:42] And vb is 1% of the containing block in the direction of the root element's block axis. So vi, vb is basically you can do it based on the containing block instead of the viewport, which will be nice.