Simple Explanation Of rem & em CSS Units

[Music] hey guys in this quick video we're gonna discuss some of the CSS units of measurement that confuse new developers and designers and that's REM m vh and VW okay but we're mostly going to focus on REM and M now for a long time we use fixed pixels or P X units which is very simple to understand 12 pixels is always 12 pixels no matter what well R M and M are relative and the difference between the two is what their relative to okay now they're both relative to font sizes but M is always relevant re REM is always relative to the root element which is the HTML element and then M units are relative to their parent element okay or the element that the child is used by so let me show you exactly what I mean cuz obviously that that can be kind of confusing what I just said so I what I have here is an index.html file and in the body all I have is a div with the class of box and then a paragraph inside of it with some dummy text alright and then I have it linked to a style sheet which I don't have anything in yet alright yeah over here you're seeing the the HTML file and you're also seeing my google chrome tools now what I want to do here is I want to grab this paragraph so we're just gonna put in a piece selector for our paragraph and we're gonna set the font size to one rep alright and we're gonna save that now we're not gonna see any difference because the default font size is 16 pixels for the HTML element or for the page now if we go over here on our chrome tools and so you know I can make this small or make this bigger okay so if we go over to our chrome tools here and we go on the paragraph that we just created which is right here and down here where our Styles are we can click on computed and you can see that the font size is actually 16 pixels okay so the browser takes that one REM and it converts it into pixels now this is relative to the HTML font size okay so right here this HTML tag if we click on that it's relative to that font size which by default is 16 pixels now what's cool about REM is that the user can actually control the size of the font from their browser settings so if we go to sewers its settings and we go down to appearance and we go to font size you'll see that we have medium recommended is the selected but if I go and change it to large you'll see that the font actually got bigger okay if we change it to very large it gets bigger if this was just regular pixels like let's say 16 pixels and save that has no effect so that's that's one reason alone to use REM is that the user can actually control we can't control the font size like that so it's great for accessibility people that have you know vision vision disabilities and so on alright so let's just put that back to medium so that that's one reason to use REM now like I said this is this is 16 pixels by default now you can of course change the HTML font size so if we say font size for HTML 10 pixels and save this is going to go down to 10 pixels okay one REM is going to equal whatever the font size is here now if I were to change this to 2 REMS this is now this is a multiplier so it's going to take the font size and it's going to multiply it by 2 so if I save that you can see down here if I hover over the paragraph and we go to computed the font size is now 20 pixels because it's double what the the core HTML font size is now of course you can use decimals here as well so if we say like 1.5 REM and save now you can see that it's 15 pixels all right if we were to say let's say 6 REM you can probably guess what that's going to be it's gonna be 60 okay it's going to multiply this by six okay so hopefully that makes sense now I'm gonna set this back to one REM and I'm going to just get rid of that so it's back to its original 16 pixels now you don't you can use REM on more than just the font size so and you should so let's go ahead and let's put a border in here and we'll say let's just put one REM to begin with and see what that gives us and we'll say black solid so by default one REM of course is gonna be 16 pixels because that's that's the root elements pixel size for the font but what we would want to do here is take a percentage of that so let's say zero point one REM and then if we look over here you'll see that the border size is now 1.5 something pixels okay so let's add some padding here so padding so padding I'm actually gonna set to the same as the font which is gonna be one REM which is going to be 16 pixels alright but of course you could change that if you want if you wanted to do like 0.5 REM you can see that the border is now I mean I'm sorry not the Board of padding is now 8 pixels okay it's gonna be half of 16 pixels but I'm gonna keep it at 1 rim now if I were to go back into my settings so let's see settings and we'll go to font size very large and you can see that now not only has the font size increased but also the the border and the the padding has as well you can see font size is now 24 pixels and the padding is 24 and then the border is 2.3 something pixels okay so it gives it gives the user that control if we say very small it's going to decrease all of that stuff the font the border in the padding alright let's put that back if this stuff was set to pixels and it was all fixed that wouldn't make any difference at all all right so it's really not that hard to understand it's just relative to the HTML font size okay and one REM is equal to by default 16 pixels unless you change it here or you change it in your browser settings or whatever so now let's move on to M now M works the same way except it's not just relative it's not relative to the HTML it's relative to its parent element now this paragraph has a club a div with the class of box wrapped around it so what I'm gonna do here is let's say dot box and let's set the font size let's see so we'll say it will set the font size to let's say 30 pixels all right now if I save this we're not going to see any difference because again REM is relative to the root HTML but if I were to copy this and then we'll just comment that out and then we'll change this to M units okay instead of REM and save now you can see that it's relative to box it's relative to its parent element if we look down here at the the the computed Styles you can see for border we have 3 pixels for font size 30 for padding 30 because that's they're both set to 1m now if we didn't have a parent okay so if we get rid of this right here this body I'm sorry box font size 30 if I comment that out and save then it's gonna work like Ram it's gonna be relative to the HTML if I were to set font size 10 pixels you'll see that it'll change because this the HTML is in fact the the parent of the paragraph okay now if I go when I change my settings over here let's first of all get rid of that and save so it's back to normal and if I go to my settings and change to very large you'll see that it'll also change here very small all right so you can still do that even with MS now that won't work if I want to just go back to okay so it won't work if you're not you using the core HTML element so now if I go very small you'll see that didn't change okay it's not gonna work if your parent element actually has a defined font size okay hopefully that makes sense alright so there's not much more to be said without overcomplicating it that that's that's the basis of how MRAM works REM is relative to the root element M is relative to its parent element okay and it's always relative to the font size all right so what I'm gonna do is I'm just gonna comment all of this out and now we're going to talk about V H and V W which is viewport Heights and viewport widths so I've talked about this in a few videos before I have the full screen video background that I just did also I have a landing page with a full-screen image the in those videos I talked about VH of V W so if you saw those and you probably already know this stuff but basically if I set the box okay remember we have a div with a class of box and we'll set the background to blue all right we'll save and by default it's just gonna be you know just that div now let's set a height for this and let's set it to 20 VH all right and we'll save now what this is gonna do is it's going to take up 20 viewport Heights so if we look at the height of the browser right no matter how small no matter how maximized it is or whatever you can think of it as a hundred slices across okay and what we've set it to is 20 of those hundred slices so you can see it takes up 20% of the height if I were to set it to 50 you'll see that it takes up half of it and and this is no matter how how this is resized if we go and we can actually close this so if we resize it down to this you'll see it's always gonna be the same it's always gonna take up half all right now for the full screen image landing page that I did in the video landing page we set this to a hundred so that it was it would always cover you know a hundred percent of the of the height no matter how how we resize this now the space you're seeing on the sides here and at the top this is from the padding and margin from the body also from the power graph here paragraphs by default they have a margin of I think it's ten pick or five pixels on the top and bottom so to fix that what I would do is add a reset so we can say asterisk which means every element on the page but it's just my zero out the margin padding like that and save and now you'll see there's no spaces now if we go and we add something below the box remember that box is what has the VH 100 if we were to add let's say an h1 under here and we'll just say whatever hello and save you'll see that no matter how we resize it we still we don't see anything below the box okay until we scroll by scroll down now we'll start to see the rest of the content so this is how fullscreen landing pages are made at least this is one way this is the way that I suggest all right so that's VH and then we also have VW which is viewport width now you don't need to use this as often because as you can see it goes all the way across it's a block level element but we could set width to let's say 50 V W if we do that and say if you'll see that it'll take up half of the page okay and if we set it to 100 it's gonna go all the way across just like it was anyways alright guys so hopefully this helped you understand a little bit about RAM em and the viewport height in viewport with units now it's up to you what you want to do if you still if you want to use fix pixels or whatever that's absolutely fine it's all preference I'm not gonna say there's a right or wrong way to do everything but if you want your site to be the most responsive it can be if you want it to if you want users to be able to control the overall scale of the site for readability then I would suggest using RAM units alright you know frameworks like bootstrap for they've moved from using fixed pixels to REM units just to make things more responsive and more more readable alright so that's it guys thanks for watching please leave a like if you liked this video please subscribe if you're not and if you feel like subscribing and I will see you next time hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for 1 dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info

Channel: Traversy Media

Views: 95,287

Rating: 4.9773612 out of 5

Keywords: css, css rem, css em, rem, em, rem unit, css vh, css vw, css units

Id: H4UtKu11yXg

Length: 14min 43sec (883 seconds)

Published: Sun Oct 08 2017