7.7 Vh, vw: The New Kids on the Block - Video Tutorials & Practice Problems

<v Michael>At the end of the last section</v> when we were talking about rems, we mentioned how useful it is to have these styling choices that will look good on a variety of different based font sizes so that something that looks good on a desktop can also look good on a mobile device. <v Lee>Exactly, and in the previous section,</v> we actually also talked about using relative font sizes for things like widths, and margin and padding and why it might not be a good idea because it then is basing the size of these elements off of the line height of font, which is a weird thing. And so one set of new values that everyone should get to know and love is the view height and view window, and what these allow you to do is instead of something crazy like setting the size of a box off of the font size, it lets you set the size of a box based on the size of the browser window. It's amazing that this is a new addition to the world of CSS within the last few years because this seems like one of those things that should have been one of the first ones that was there. I mean... <v Michael>Yeah, I'd never heard of these</v> until this tutorial. <v Lee>Yeah, it's one of those things</v> that like you would imagine one of the first things that you'd wanna do is say like oh, I want this element to be half the size of the browser window. No matter what else is going on on the page, just halve the size of the window, and it just wasn't supported for a long time. <v Michael>Yeah.</v> So these two new relative sizing methods are vh, which is viewport height, and vw, which is viewport width. And I'm gonna look at an example here. Lee, how do these work? <v Lee>So they work a lot like percentages</v> but because CSS is weird, they have kind of their own way where each whole unit, so one vh is 1% of the height of the viewport. <v Michael>Okay.</v> <v Lee>So 3 would be 3%.</v> So it works like a percent but so did the ems but ems were based on a one scale where one was 100%. So everything in CSS is always gonna screw you. You'd imagine that at some point they'd be like, well, if we're gonna use 0 to 100 to represent 0 to 100%, let's just do that everywhere but no, some things it's zero to one, and you have to go into decimals. <v Michael>Yeah, all right,</v> well, let's look at an example of this. We're going to use a new section. We're gonna add a new section called the hero section. (Lee grunting in agreement) And we're gonna give this... What is this? It's gonna be a couple classes, right? <v Lee>Yes.</v> <v Michael>So we'll see how these get used.</v> Full-hero with a hyphen. And then-- <v Lee>Hero-home.</v> <v Michael>Hero-home.</v> And we wanna... I'm gonna cut this div. We're gonna put just this here. Indent it and then paste it in. Should I have a space here do you think or should I do that? Which do you prefer? <v Lee>You can add a space there</v> just to visually separate it. I like doing that. <v Michael>Right, so we've got this now,</v> let's look at some hero styles. <v Lee>Exactly, let's do our own little styling for this.</v> <v Michael>Yeah, where do we wanna put these?</v> <v Lee>Well, it should have its own section.</v> <v Michael>Right, so should it be--</v> <v Lee>And it should be towards the top</v> because we're gonna actually end up using this hero across the site, and in case you're not familiar with the term, when you go to a website. <v Michael>Yeah, this is a weird term, yeah.</v> I didn't know this until fairly recently. <v Lee>Well, they've been called a whole bunch</v> of things over time. The, again, nomenclature always changes. <v Michael>Yeah.</v> <v Lee>Currently, it's popularly called heroes.</v> Sometimes they're called billboards, other things like that, or splashes. It's when you go to a website and there's a big image or section at the top of the page that kind of fills the page. That's a hero. <v Michael>Okay.</v> <v Lee>So we're gonna reuse this</v> on different parts of the site. So it should be up by the social styles because that's kind of where we're putting elements that get reused across the site and aren't germane to just one page. <v Michael>Should it be before or after do you think?</v> <v Lee>It could be either.</v> <v Michael>Okay, pick one.</v> <v Lee>Let's put it before.</v> <v Michael>Okay.</v> Okay. And what are our styles gonna be? I guess we're just styling the full-hero class at this point, right? <v Lee>Right.</v> And that's short for full screen hero is what the thought was behind that. And so we're gonna give it a background-color and we're gonna give it a height. We should also remove the height 800 pixels from the body while we're at it right now. <v Michael>Okay.</v> All right, let's take a look at that. Okay. <v Lee>There you go, the beginnings.</v> <v Michael>Yeah, it's interesting</v> but now, it looks like there's some space around here. That's not pretty attractive. <v Lee>Yeah, let's get rid of that</v> before we talk about exactly what's going on with the view height unit. So what that is is that's default margin and padding from the browser. So by default, on just a blank HTML page, it tries to keep the content away from the edges. We're now gonna remove that. So Michael, if you add HTML and then comma right in front of that body where we just removed that style. <v Michael>Right here.</v> <v Lee>And then add in margin: zero</v> and padding: zero. <v Michael>Ah.</v> And then--- <v Lee>Also, add h1, margin-top.</v> And actually, so comment that out. Let's first look at the margin and padding where we remove it from the default HTML styling. So when you do that, notice, everything went away but there's still a margin on the top. And this is something we'll discuss later in the tutorial when we talk about what's called margin collapsing. But what's happening is there's a default margin top on the h1 and it's actually bleeding through the parent container and pushing the whole parent container away from the top of the browser. So if we wanna get rid of that, and have this full-hero really expand to touch all the edges of the browser, we'll yeah, exactly, kill that margin top and boom, there we go. <v Michael>Great.</v> <v Lee>So now what's happened</v> is it has a height of 50 view height, which means 50% of the viewport window. So if we look at the browser, that blue box is 50% of the height of the whole browser window. <v Michael>And how did you find this color here?</v> You used a color picker? <v Lee>I used a color picker</v> and did exactly what we did the last time that we picked a blue, which was just picked something that was like a nice neutral blue, and there it is. <v Michael>That's great.</v> All right, so 50vh is 50% of the viewport height, and again, I did not know about this when we started out on this tutorial. So this is a really useful little bit of extra knowledge. It's especially useful for mobile, is that right? <v Lee>Exactly.</v> So there's a lot of times on mobile where because there's a proliferation of different device sizes, you just wanna say take up the full height or the full width of whatever it's on, whatever size device. So this is an easy way to set your elements to be a very specific percentage of the thing. Just to take a look, Michael can also add a view width to the full-hero if he were to add like width: 75vh on full-hero. <v Michael>Okay, like here?</v> <v Lee>Ah huh, just to see how it goes</v> for the other direction. And just like you'd expect, it takes up 75% of it. I mean, it makes sense but it's nice to see. So if you were to resize the browser window, that would change. So if you wanna open up another one so that we don't lose the size of it. So it's always that proportion. So as you make it bigger or smaller, it's gonna resize. <v Michael>So how's it different</v> from the percentage being 75%? <v Lee>So the percentage, we mentioned,</v> it was based on the parent container. And it needs real values that are in there somewhere. So this is totally just based on the size of the window. So if you put something way down the page contained in parent containers and whatever, but give it a height or width using view height or view width, it'll always be based off the size of the browser. <v Michael>Got it, it's got sort of a global setting</v> that's based on what the user is actually looking at. <v Lee>Right, so it's almost like an absolute value</v> in that, but it's also relative in that it can change with the size of the browser. <v Michael>All right, we had another example here.</v> We actually changed a font. <v Lee>Right.</v> <v Michael>There's an h1 font change.</v> That's right here. (Lee grunting in agreement) <v Lee>So this is one of those cool things about--</v> <v Michael>This is 7% of the viewport width.</v> <v Lee>Right, and that's 7%,</v> this is a little tricky. So it's 7% of the width is the height of the font. <v Michael>Oh, okay.</v> <v Lee>Font sizes are always a little screwy</v> because you're always-- <v Michael>That's weird.</v> <v Lee>Font sizes are always based</v> on the height of the font. So you're taking a width measurement and converting it to a height but the cool thing here is that this font will now automatically resize based on the size of the browser window. <v Michael>Okay, so let's take a look at that again.</v> <v Lee>This sort of thing was impossible to do.</v> Like, you would have to use actual JavaScript programming to do this sort of responsive styling. And this is a huge, huge benefit having this in CSS now for mobile site design. <v Michael>So we'll be talking about that later</v> in the tutorial but that's really useful. Cool.