Units

- [Instructor] There are many different units you can use to set the width and height of elements with CSS. Pixels is the most common for webpages. This is an absolute length, and it's always going to be the same size no matter what else you do in your code. So going into my code here, on line nine, I'm going to style the div with a width of 400 pixels. So, going over here to refresh, you can see that that's a size that stays the same even if I change the width of the browser window.

We also have some relative units, which means their length can vary. Using relative units is a key part of making layouts responsive so that the content of a page can fit in any size view port. One relative unit is percent. Percent is calculated in relation to the elements containing element. So going into the code, I'm gonna give this div a width of 75%, so on line 10, I'm just going to change the width, save, and refresh, so now when I change the width of the browser window, that box is always going to be 75% wide, no matter the size of the window.

So I'm gonna add a paragraph inside that div down on line 17 and then give that paragraph here on line 12 a width of 50% and save and refresh. And now when I resize the browser window, that paragraph's always going to be 50% of that containing element no matter how wide it is. VH and VW are very useful units for calculating size on responsive websites because they are in relation to the size of the viewport.

VW stands for view port width. The number will be 1/100th of the width of the viewport. Vh stands for viewport height, and the number's going to be 1/100th of the height of the viewport. That means that 50 vh would be half of the viewport height. 50/100th. So going into our code, let's get rid of our paragraph, and our div is going to be a width of 50 VW and height of 50 VW.

Save and refresh. So now it's going to be 50% of the width of the viewport no matter what that will be. This works a bit differently than percentage which is always based on the containing element. So we also have vmin and vmax, which allow you to size something to whichever is wider or narrower, the width or the height of the viewport. Vmin is 1/100th of the smaller side of the viewport, and vmax is 1/100th of the larger side of the viewport.

So, going into the code, I'm gonna change both the width and the height to be 50 vmin and save and refresh, so now when I resize this, it's gonna be a square, and the measurement will be half of whichever is the narrowest side of the viewport. So here, the horizontal measure is narrower, so it's 50% of that, so here, the vertical measure is shorter, so it's 50% of that. We have one more length unit that's important for responsive layout which is the FR, which stands for fractional unit.

This one is only used in grid layout and allows you to size something as a fraction of the leftover space in a grid container. You'll see this in action once we start looking at grid layout.