8. The Solution Rems - Responsive CSS Tutorial

before I go into the solution which is the REM unit I just don't want to poop on the M too much it is a super useful unit and after we've seen these two and we understand where the REM is I'm gonna go into when we might want to choose which one and hopefully make all of it a lot more clear on why both of these are super useful and super important when we start thinking responsibly so the REM is an M but it's short for route m and what does that mean well it means it's always instead of being relative to the parent like the M is it's always relative to the route of our document and I've used the word route a few times and the route of an HTML page is always the HTML element itself that's where a lot of the defaults are coming from even though we haven't actually been styling that in our CSS up until now so you might be wondering how does this make our life easier and let's go and take a look at how so remember right now we get these giant sizes coming and even though this is set to 2m and this is set to 2m this one is getting gigantic it's getting out of control because it's 2m times 1.5 m and it's scaling up and it's a compounding factor that's going on whereas if we use root m we lose that so when my font size is here I'm gonna switch that to an REM instead of an M and the same thing here and the same thing here and the same thing on my headings and let's go and take a look at it right away without doing anything else and look at that this font size is now the same as this font size and this is a lot bigger than this one but that's because I do have my font size set to one and a half RAM here so this font size will be bigger I guess when you're rid of that comment because it doesn't really apply anymore and here we used to have that double compounding factor that was going on my list item was compounding through this which was then compounding again through that if I take this off now and we take a look it's gonna look exactly the same because it's just set to that one size that's relative to the HTML element but you remember that cool thing with m's when I change the font size on my body and everything just worked around that and sort of scaled up and down with that one unit so it's almost like m's and rims are almost like creating a scale instead of creating these font sizes so what we can do is on our HTML element we can set a font size on here so I'm gonna set a font size of 10 pixels and we go and take a look at what that's done everything is shrunk down everything on this page has gotten a lot smaller and if I come on the HTML um in here and I make this 30 pixels everything will have gotten much much much bigger except for this paragraph why hasn't that paragraph gotten bigger what's going on can you figure it out so you remember the paragraph is inheriting its font size the section 2 doesn't have a font size on it nothing that is contained except for the body has it and this is an absolute unit it's not relative to anything we have this in the pixel so this is where it's sitting and it will not change so we so what we've managed to do so if we switch this over from that to one m and then by when am i do mean one R M for font size I'm always going to stick with REMS and you can see here what's happened is everything is going to keep that nice scaling feature where everything is scaling up or down with something else without the possibility of running into that compounding issue now the one thing I wouldn't actually do is set a set font size on my HTML element like this usually I'm just leaving it at the default or I might use a percentage if I need to play with it and you'll see some people recommend setting the percentage really low here to shrink things if you set it to 60 2.5% this makes the default which was 16 now become 10 so when you instead of having to think of one room as 16 pixels and then it's hard to do math like what 16 times 1.5 it's easy now because this is 10 and then that becomes 10 so this is 20 and this is 15 it makes it much easier to think that way I don't do that I you did for a little while because it is easier I will admit but after some time you really do get used to working on this scale of 16 pixels and when you need to scale this up and you're gonna see when we start getting into mobile when we start doing different designs you're going to have on a mobile screen you're probably gonna have a smaller font size and then when you get to a bigger screen you will up the font size so you can up the scale on it but instead of using the percentage maybe you just keep this at 100 as the default and then at the bigger size you just bump it up to 110 and everything or 120 and everything just scales up with it so I tend to just not even bother with this and I leave my REMS like that and play around with it and I've gotten used to doing that and that's how I'm gonna be working through it the rest of this course so you will get a chance to see and I'm gonna explain myself every time I'm using these units especially for the next little while while we're doing them including the next video where I'm going to explain that Em's still do have a purpose we're going to see what the purpose is and how I decide between em and REM and what my for them is