Had a little time this morning and I have had a lot of questions from people asking about the rem unit in my last video. Hopefully this clears things up. Have a great Sunday everyone!
You are the greatest man! i'm taking my time doing the Angular4 Udemy course! but this little gems (videos) are equally great! thanks again man! Greeting from south america :D
I'm not Traversy Media, but I think I can answer this for you. The whole point of using rem and em is to make the website responsive. It's so someone on a tablet or phone can view the webpage in all its glory, just as someone on a computer could.
but responsiveness is in simple means defined by the viewport (width/height of the browserwindow). and rem only relates to the font-size of the html elment. then ok, you can give different font-sizes on different viewport sizes, but how does it make the responsive game easier? I can't see a use case whereI should base all my sizings on one base-setting
I don't have words to explain how much this is valuable. Initially when video startup, due to lower voice I heard, I thought this will be boring one. Basically no energy. But it was just a matter of a second. This is awesome and very clear explanation with a directly to subject video. So as a summary, I guess this is a only video you need to check to understand the difference between those. So really appreciated.
The units have been a pet peeve of mine. Your explanation hands down is the best I could find on the web. Easy and to the point. Now, whenever I have an inquiry about anything front-end development. Your channel is the first place I check. Thanks a lot Brad !
Thanks, Brad, for this awesome tutorial. Relative units always confused and I didn't find any good tutorial which can explain this better except you. You cleared all my doubts and now I am going to change font sizes for all my websites.
Some ideas for next videos: * Stripe API project * Building extension/theme for VS Code/Chrome * HTML newsletter design, MailChimp crash course, MJML crash course. * Jekyll crash course
Very grateful, did not really know that the rem is relative to html and em is relative to parent.. Thank you so much every video that I watch from you I learn something new.
It's great to get a notification that a new video has been posted. Very helpful content - particularly for someone like me who is learning html, css, etc
Wow, the viewport height portion is going to be really useful to me. Wish I knew how simple it was a long time ago. I wrote some reusuable code in javascript to make sure the body of a web page will be at least the height of the user's viewport. I've used it on a ton of websites, but now I realized I can just apply this one CSS rule. So simple!
Thank you for explaining this. I am definitly switching to rem and vh units instead of pixels. I think this is no brainer if we want to build sites that are responsive and also accessible to end user.
Man! I don't know what to say about your content !!! I watched the video and wanted to like it I found out I already did :) Merci beaucoup, from France!
Hi Brad, I want to thank you for all your great work, it's very inspiring and it's making me wanna do the same but in my language, if I get to be half as good as you doing this I'll be more than happy. Thanks again and have a nice day!!
Great videos and special thanks for the pronunciation - clear and understandable. English is not my native language but it is a real pleasure to follow your screencasts. Currently I have no job as a web developer but when I have (hope not so long left till this moment) I'll thank you with some amount of bucks for all the good you've done to me and thousands of people. Thank you very much!
Thanks Brad this was a great video, and it definitely cleared up some of my questions about the difference between rem/em and pixels. Nice video length too, I thought it wasn't too short or didn't drag on.
Thanks for this great tutorial.... It is very easy to understand .... Now all the unit is clear to me....... please keep up doing great tutorial like that.....
One more thing is that if you set a font-size of an element using rem units, and use em units to set things like padding on the same element, that will be relative to the font size of that same element. So if the font-size is set to something like 2rem, then 1em = 2rem units.
Hey Brad, do you think you can make a video on how to deploy a simple website?? Explaining the things we need to know and understand when putting our site online ?Would be much appreciated
Wednesday 22nd April 2020 Learning Class: Simple Explanation Of rem & em CSS Units Thank you very much for the explanation about rem and em Mr Brad Traversy.
So... rem = relative to html font size em = relative to parent font size (em works just like rem if there's no parent element) vh = height of element relative to web browser size vw = width of element relative to web browser size
also vmin and vmax are important to mention + em cascade so it was important to show an example of that (: search for css units video by devtips to more in depth css units stuff(: thanks for the video brad.
Thanks Brad ! All of ur tutorial are awesome. At your convenience, would you make a tabris.js tutorial as it can build hybrid app in javascript without using any framework such as react, vue and angular? Look forward to it!
When using ems, border and padding are relative to the font-size and not to the parent element, only the font-size is linked to the parent element. Border and padding are calculated based on font-size. So if parent is 12px, and child's font-size is 2em(=24px), 1em padding will be 24px, not 12! Correct me if I'm wrong though...
I finally understand rem and em! One question, when you went a width of 100vw, why did you have a horizontal scrollbar, and how would you get rid of that without hiding the overflow?
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Had a little time this morning and I have had a lot of questions from people asking about the rem unit in my last video. Hopefully this clears things up. Have a great Sunday everyone!
You are the greatest man! i'm taking my time doing the Angular4 Udemy course! but this little gems (videos) are equally great! thanks again man! Greeting from south america :D
thabnks for this tutorial! but i can't see a practical use-case for using rem. what's the benefit besides of changing html font-size in chrome.
I'm not Traversy Media, but I think I can answer this for you. The whole point of using rem and em is to make the website responsive. It's so someone on a tablet or phone can view the webpage in all its glory, just as someone on a computer could.
but responsiveness is in simple means defined by the viewport (width/height of the browserwindow). and rem only relates to the font-size of the html elment. then ok, you can give different font-sizes on different viewport sizes, but how does it make the responsive game easier? I can't see a use case whereI should base all my sizings on one base-setting
What more can I say; that each time I need clarification on a subject, I have but one place to go; Traversy Media. Five star to you, Mr. Brad.
I don't have words to explain how much this is valuable. Initially when video startup, due to lower voice I heard, I thought this will be boring one. Basically no energy. But it was just a matter of a second. This is awesome and very clear explanation with a directly to subject video. So as a summary, I guess this is a only video you need to check to understand the difference between those. So really appreciated.
Simple explanation and demonstrations. I will never forget how to use rem, em, vh, and vw! Thanks a mill!!!
Was following a paid tutorial... they made it seem soo complicated. Thank you so much for all your work
Kazakhs everywhere. Привет с Астаны))
I'm not even taking any paid course. Brad's videos along with MDN Web Docs..and some time Academind, Ninja etc. Channels are enough
@Abishek Raju Haha, I almost forgot about this comment
For real though. I'm over here trying to carry the 1 and ish lol. This is spoken in real life language, not Gandolf spoken word riddles. Great job.
What I couldn’t understand after listening 1 hour class in my college , u Made me understand in 15 min . Thank you for this free content
This is the best explanation I could find about this topic, really clear to understand. Thank you!
You are helping millions of people land and survive their job. Thanks for making our life easier.
I'm here because I enrolled for udemy course on bootstrap 4. Thanks Brad for excellent content!
Finally! A comprehensive, straightforward explanation of this topic. Thanks Brad, exceptional teaching as always.
The units have been a pet peeve of mine. Your explanation hands down is the best I could find on the web. Easy and to the point. Now, whenever I have an inquiry about anything front-end development. Your channel is the first place I check. Thanks a lot Brad !
Thanks, Brad, for this awesome tutorial. Relative units always confused and I didn't find any good tutorial which can explain this better except you. You cleared all my doubts and now I am going to change font sizes for all my websites.
This video is better than my bootcamp tutorial on how to use rem and em units. Best and simple explanation I've come across. Thanks👍👍👍👍
Thank you for this simplified explanation I finally got an understanding of this.
I come from your Udemy couse about Bootstrap just to clarify a bit more about REM and EM and it's amazing how clear you explain things. Thanks!
You are one of my favorite tutors on the internet. Thanks a lot for your teaching style. You helped me a lot.
Beautifully explain sir
love from Pakistan
This is the best and simpliest explanation about css units, glad that i found this.
wow, after 5 different videos, this was the one i was looking for. Thank you for this clear explanation i was looking for.
Some ideas for next videos:
* Stripe API project
* Building extension/theme for VS Code/Chrome
* HTML newsletter design, MailChimp crash course, MJML crash course.
* Jekyll crash course
Jekyll templating
Testing!!! both unit testing and integragion testing
Very grateful, did not really know that the rem is relative to html and em is relative to parent.. Thank you so much
every video that I watch from you I learn something new.
Threre will be no need to watch an other video for rem em
Thanks sir
It's great to get a notification that a new video has been posted. Very helpful content - particularly for someone like me who is learning html, css, etc
I always get amazed how Brad explains everything so clearly & elaborately..... Thanks man 😊
Wow, the viewport height portion is going to be really useful to me. Wish I knew how simple it was a long time ago. I wrote some reusuable code in javascript to make sure the body of a web page will be at least the height of the user's viewport. I've used it on a ton of websites, but now I realized I can just apply this one CSS rule. So simple!
This is the Only Video in UA-cam I Got fully Clarified about CSS Units!! Thank You So Much!! But You Missed out Percentage (%)
Thanks Brad. You really cleared it up with rem and em. I am looking forward to advanced css series if you're planning to make one.
Thank you for explaining this. I am definitly switching to rem and vh units instead of pixels. I think this is no brainer if we want to build sites that are responsive and also accessible to end user.
Man! I don't know what to say about your content !!! I watched the video and wanted to like it I found out I already did :) Merci beaucoup, from France!
Finally got the hang of this , thank you brad
Hi Brad, I want to thank you for all your great work, it's very inspiring and it's making me wanna do the same but in my language, if I get to be half as good as you doing this I'll be more than happy. Thanks again and have a nice day!!
Thank you so much for explaining this Brad. I been getting asked about rem in the past few interviews... Thanks to you, I finally understand rems!
Well appreciated Brad, you are so great trainer and person...
Thank you
Thank You Brad, now got it clearly about px, rem, em and when they change their behavior .
Great videos and special thanks for the pronunciation - clear and understandable. English is not my native language but it is a real pleasure to follow your screencasts. Currently I have no job as a web developer but when I have (hope not so long left till this moment) I'll thank you with some amount of bucks for all the good you've done to me and thousands of people. Thank you very much!
Did you get that job?
I dont have any knowledge of CSS and still I got what an em and a rem are. Thank you
Thank you Brad for sharing. Your tutorials are very helpfull and easy to understand.
Super clear explanation of the practical differences and important of rem, em and pixel-based specs. Thanks!
very simple anf straight forward.. i have watched so many videos but this stands out.. kudos!
Perfectly explained 👌Thank you.
video was 4 years ago but really explained very well. I have watched 2 to 4 videos but didn't understand
Thanks Brad this was a great video, and it definitely cleared up some of my questions about the difference between rem/em and pixels. Nice video length too, I thought it wasn't too short or didn't drag on.
your teaching is awesome, today I understood rem and em. thank you so much
Thanks for this great tutorial.... It is very easy to understand .... Now all the unit is clear to me....... please keep up doing great tutorial like that.....
they make it looks so complicated
thanks for making it looks simple
Thanks for yet another great, well-explained video!
Great video. As a beginner now i know the use cases of em and rem.
One more thing is that if you set a font-size of an element using rem units, and use em units to set things like padding on the same element, that will be relative to the font size of that same element. So if the font-size is set to something like 2rem, then 1em = 2rem units.
Hey, when em is used on padding and margin, it's gonna be relative to that element's font-size. Not to its parent. You didn't mention that.
Wow, your explanation is simple and clear.
Thanks
Hey Brad, do you think you can make a video on how to deploy a simple website?? Explaining the things we need to know and understand when putting our site online ?Would be much appreciated
Thank you, your explanation is simple and very easy to understand
Nobody does it better!!!!!!
Thank you so much
at last I have a clear explanation of what this stuff is. very demystifying.
This clarifies my confusion about rem and em. Thank you!!
amazing explanation + short video
best combination
Wow your video finally gave me a pretty good idea on css units.
Thanks man.
Wednesday 22nd April 2020
Learning Class: Simple Explanation Of rem & em CSS Units
Thank you very much for the explanation about rem and em Mr Brad Traversy.
This is what I was looking for! Thanks Brad
viewport dope!!! defiantly not used to rem, but I’ll start using it now.
Thank you for the time to explain these units
Another nice one from you Brad, more power to you.
So...
rem = relative to html font size
em = relative to parent font size (em works just like rem if there's no parent element)
vh = height of element relative to web browser size
vw = width of element relative to web browser size
Finally all of my confusion is clear.
Thank u, Brad. Super helpful even in 2020
Ill love to see you create a landing page using css grid, i like the way you explain things. Thank you for all this content.
also vmin and vmax are important to mention + em cascade so it was important to show an example of that (:
search for css units video by devtips to more in depth css units stuff(: thanks for the video brad.
Ty to u and everyone that makes these video
best tut about rem and em
Thanks Brad ! All of ur tutorial are awesome. At your convenience, would you make a tabris.js tutorial as it can build hybrid app in javascript without using any framework such as react, vue and angular? Look forward to it!
simple and well done ... thanks Brad.
I love the way u make things look so simple
When using ems, border and padding are relative to the font-size and not to the parent element, only the font-size is linked to the parent element. Border and padding are calculated based on font-size.
So if parent is 12px, and child's font-size is 2em(=24px), 1em padding will be 24px, not 12!
Correct me if I'm wrong though...
HI brad our sunday just completed last 3 hrs :) anyways nice video short informative and practically shown to understand all possible cases , thanks
REM refers to the root HTML and the band... got it!
I finally understand rem and em! One question, when you went a width of 100vw, why did you have a horizontal scrollbar, and how would you get rid of that without hiding the overflow?
You are not going to need that ! Use width:100%; instead.
@@deeptanshushandilya1459 what's the difference between % and vw?
Thank you so much.
You helped me understand easily.
" 13:24 "
Thank you. Indeed, it did help.
crystal clear with my doubts
OMG!!
You're really a saviour, thank you
Thank you very much for this tutorial! You explained it very well.
Thank you so much for this video. It clarified a lot.
Thanx simple and clear you are the best
It was amazing.Such a great video.completely explained!
Thank you sir my concept is now clear about REM,EM :)
After watching this video finally I have good understanding how rem, em and vh works. Thanks!
as said by everyone this the only video were i can understand this topic
best tutorial for understanding
The next video suggestion for me is REM - losing my religion. lol. Thanks for explaining this for us by the way. Great vid.
LOL Good song
keep it up bro, liked your explanation and subscribed.
Thank you veeery much for this video:) You explained the topic perfectly!
God bless you Brad! Awesome!
Excellent explanation!
very very clear explanation. Thanks sir
Fantastic explanation! Thanks so much for this!
awesome job man. Very well explained
Well explained, now I can move on.
Thanks for your simple explanation.
thanks brad , again a great video 😊😊 god bless
Hi Brad, when is going to coming cpanel series? Eagerly waiting?