2 CSS Units - Responsive CSS Tutorial

Key Takeaways

before we can really take a dive into making responsive websites the first thing that we need to do is take a bit of a deeper dive into CSS units because there are many different types of units that we can use we have absolute units and this is what we've already been using we have relative units and we also have percentage which is a bit of a special case so absolute units you've already seen these this is the pixel they're the easiest ones to understand because there are a fixed size and they're always the same size we also have a whole bunch of other ones that you don't see come up too often your points centimeters millimeters inches if you can think of a unit that exists in the real world you can use that unit in your designs now the thing that's weird about those ignoring pixels we're just thinking like the point centimetre millimeter inch if you put your like a ruler up on the screen they're not really gonna correspond to it you shouldn't really be using them unless you're doing print styles because you can make a style sheet or a set of styles for a document to be printed in that case that's fine but the rest of the time if you need an absolute fixed unit go with your pixel we also have percentages so percentages are mainly used for widths and they're pretty easy to understand because it's a percentage that's relative to the parent now I said they're usually used for widths because on height things get a little weird sometimes it's relative to the height of the parents sometimes it's actually relative to the width of the parent but we're not setting heights very often we're going to see some use cases later on in this course where we will be setting Heights but for now we're going to be sticking with percentages for widths because that's usually where we're going to be using them and it makes it really easy both to do something that's gonna be like 80% of the whole browser window or if it's children sometimes you want two columns so one of them is 60% and one of them is 40% or a 70% in 30% and you know they're taking up 100% total so it's much easier than trying to calculate the actual pixel dimensions on things when you use percentages the last type is relative units and there are two different types of relative units there's units that are relative to font sizes and there's units that are relative to the viewport so the viewport is your browser window in this starting to think responsively we're not going to get into the viewport unit we're gonna focus on the ones that are relative to font size because they're used so much more the viewport units have special cases they are you definitely used in some situations and we are going to look at them in this course just not in this module now the idea of having units that are relative to font size it might sound a little bit complicated but once you start playing around with them it's really not that bad so as I said we're only going to be paying attention to the ones that are relative to font size for now and not at the viewport units so the two units were going to be seeing our m and r m there are actually other ones as well you have a CH unit and some others but we're not gonna get into them for now we're gonna focus on the M and the r m because these are the ones that are used the most often the viewport units just you know them we have the v w vh v min v max they stand for the viewport width and height and then the viewport minimum or maximum which those ones are weird and they they have specific use cases but the VW and VH are pretty handy where as I said we're not gonna get to them in this module though so that's it for our quick introduction into the different units in the next one we're going to get our hands dirty with a little bit of code and since we've already been using pixels and which is an absolute unit a lot we're going to take a dive in the next video and look at how percentages work and get our hands dirty with a layout