7. The problem with ems - Responsive CSS Tutorial

Key Takeaways

so as I mentioned at the end of the last video there is a problem with the EM unit MSR super convenient for some things we're gonna see some use cases where I use them all the time but when we use them for font size it can create this weird cascading effect where things just get out of control and it can be really really bad so if we come and look I'm just continuing where we left off nothing is different from before what I'm going to do is up here I'm going to keep my font size at 10 pixels so it's really really tiny on my body but what I'm going to do on section 1 is I'm gonna give section 1 a font size 2 to M so the font size on my section 1 is twice as big as on the rest of it but if we come and look at what's actually happened is now this isn't h2 and this isn't h2 but this h2 is huge and why is it so much bigger and this is size 10 this is not 1.5 times bigger than that it this is not 15 pixels but I have my list here is set to 1.5 m so why is it so gigantic I mean what's going on and to make matters even worse why not you know we can make this even crazier on my list items themselves if I decided to set a font size of 1.5 m just for fun you know why not all of a sudden they're massive you know this is it's getting out of control literally getting out of control and if you had other nested elements it can get even worse and worse and worse because it's looking at the font size of the parent so right now my list item is looking at the font size of my list and it's gonna be 1.5 times bigger than my list so it's doing this multiplication through all of these different elements until it finally you know multiplies all going from 10 times to so we're at 20 times 1.5 we're hitting 30 and then we're going times 1.5 so you know it's getting massive it's just getting out of control big that's also why my section 1 has a font size of 2m my H 2 has a font size of 2m so we're getting that cascading effect even here which is why if we look here my age 2 at the top here is a lot bigger than my H 2 that's down here even though their font size is set to the same value and it's because it's this one is multiplying that 2m by the 1.5 m to get to this total gigantic size if you're really good and you really know how to control this stuff maybe you can do this on purpose and get away with it but there's a solution that just makes our lives so much easier so I don't do this I don't mess around with em so for font size so let's go and see what the solution is