Hi, everybody. Today we're going to talk about fluid measurements. They're really important to responsive design. I've seen some really beautifully written and spoken presentations on how important it is to have these fluid measurements. And how the artistry of responsive design can make things just incredibly good. Just the fact that I use the word good explains that I am not that eloquent. So I'm going to do my best to show you the technical reasons why you want to use fluid measurements. The most important thing is that you really want to understand that your content, it needs to fit in the size constraints of the viewport. Don't try to make people use a certain size, it's your job to conform to them. If you go to a page and you have a lot of vertical scrolling where you have to go up and down, that's really about content, it's not something that we're going to concern ourselves with. If you have a lot of content, people are going to need to scroll. What's bad, what you really don't want is I hate when people have to do horizontal scrolling. When you're on a page and everything doesn't fit in the screen so you've got to kind of look for it. We want to avoid that whenever possible. First, let's talk about absolute measurements. For many people, these may be the only type of measurements they've used when doing web design. And they do have their place, so let's talk about how we use them. For the pixel, a pixel is basically a dot on your display. 1 pixel used to be equal to 1/96th of an inch, I'm not sure that's even necessarily true at this point. But I can tell you that screen sizes have a lot of pixels and you want to think about that when you're trying to design on pixel size. Another option is to use mm, cm, or in. This stands for millimeter, centimeter, or inch. And while it may seem odd to use this kind of measurements when you're doing a webpage, don't forget, it is possible to print out your page. And if you want something to be relative to an 8-and-a-half by 11 piece of paper, it makes total sense to use these types of measurements. Another option you can use is point. And one point, it's equivalent of 1/72 of an inch. So again, this is a very concrete measurement. Another option you can use is pica. And one pica is the equivalent of 12 points. Again, these are all completely valid measurements and they have their place when you're designing your page. But as much as possible, we want to move to relative measurements, where things are sized based either on their parents or their neighbors or on the screen size, different things like that. So let's start with percent. Percentage values are always relative to some other value, for example, a length. So if you say you want something to be 75%, it's going to check the container it's in and make it 75% of that. The measurement came up with its name because it wanted to be the font size of the letter M element. It seems a little bit odd, because when you first think about it, it's going to be the same size by default. If you use one it's going to be that same size. 1.1 will make it a little bit bigger, 10% bigger. 0.9 will make it smaller than the default size. Another thing that you can use is rem. rem is very similar to but it helps avoid that problem of something getting smaller and smaller and smaller. Let me show you an example. Let's assume we're going to set something up to be 0.5em And it's going to be inside this element in here. I'm going to make up a size and I'm going to say, it's this big. Okay, well, the problem is, if I have another element inside here, the a is going to be only half as big as that a. And if I have another a in here, it's going to be even smaller. So when you use and you have things that are nested inside each other, the font can actually get smaller and smaller and smaller. And that might not be how you really want it to go. If you use rem instead, 0.5em, sorry, 0.5rem, I really need an eraser. Instead, it's always going to be half the size based on the parent or the root element. So this a is going to be the exact same size and the exact size in here. rem really helped people out when they were doing these kind of complex sites where you had a lot of things embedded inside the other. Now, the problem with teaching and learning about relative measurements, is that it's very abstract. So I tried to include a little thing here to help you make it a little clearer. 1em is basically the equivalent of 12 points, or 16 pixels, or 100%. If you don't style your code in any way, you can assume that some of these defaults will fall in. So I've tried to include this little chart here to make it a little bit more clear. In general, 1em is the equivalent of 12 points, which is the same as 16 pixels, which is the same 100%. So you could use any one of these four. Now, the difference is, if you were to resize your screen and make it bigger or smaller, only and percent would adjust to the size of the screen. If you used point or pixel, as the screen gets bigger, the font stays the exact same size. Same if the screen gets smaller. Two of the newer relative measurements are based on the viewport. vw stands for viewport width, so if you were to use one vw, you're saying, I want to use up 1/100th of the width of the viewport. It used to be the case that you needed to use Javascript to go off, find that width of the browser, return it, and do some math there. Now, we can just use it with vw. In the same way, you can use vh for viewport height. The viewport's height is 1/100th of the height of the viewport. So if you're on a screen, you'll know exactly how much real estate you have if you want something to show up exactly in the middle. This comes in really handy when you're trying to set headers and footers in specific positions. Now, there are times that you're going to want to hardcode values with those absolute measurements. But, whenever possible, when you're coming up with your design, figure out, are you going to need that font, or that image, or that section to resize depending upon the viewport? Then, you want to use these fluid and relative measurements. And I can't stress enough that you're not really going to understand how they work until you take some time, play with the code and just kind of see what you can make it do. For that reason, our next video is going to be an example of me moving from absolute to relative measurements.
