22 | EM VS REM MEASUREMENTS EXPLAINED IN CSS | 2023 | Learn HTML and CSS Full Course for Beginners
HTML-код
- Опубликовано: 29 янв 2023
- Today I will explain what the differences are between EM and REM, which are two measurements in CSS that you need to know about. 🙂 Using EM or REM will allow your website to be scaled easier when we get into responsive design as well, so it's an important video not to miss.
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon and RUclips Memberships to share improved and updated lesson material, and for a small fee you can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Memberships: / @dani_krossing
Patreon: / mmtuts
![Cordae - Saturday Mornings (feat. Lil Wayne) [Official Music Video]](http://i.ytimg.com/vi/z2GYJua09F0/mqdefault.jpg)
A person commented a list of questions/criticism about the video, and then deleted the comment as I was replying, but I figured I would copy paste my reply here in case others needed the answers. 🙂
--
1: Why use 62.5% instead of 10px?
It’s because users can change their default font-size in the browser. So if we were to use “10px”, it would be a static number that can’t be changed by the browsers settings. So by using % instead of px, we still allow the user to change settings in the browser they might need, and have it work properly with our font-size 🙂
2: Default font size, and me confusing viewers by using a reset style sheet
If you do a quick Google search you will see that browsers like Chrome, use 16px as their default font size. WITHOUT a reset style sheet. Because of this, reset style sheets ALSO use 16px as the default size, since that is what browsers typically use.
3: The video not just being about measurements
As you can tell on the title and thumbnail, this is part of an ongoing series, which means people who follow has a reset style sheet already. 🙂 I ALSO at the beginning mentioned the reset style sheet, to give people who didn’t follow the entire course a chance to get a reset style sheet prepared. However like I said in 1, the browsers default font size is typically 16px, so even people without it can follow along too.
4: EM being “lost in time”
In case someone missed it, I specifically talked about the “name” and why it is called “EM”. Not whether or not the “EM unit is outdated”. 🙂 I said it was lost in time because it is an old term that isn’t used anymore. It is a historical definition which nowadays simply refers to the size of the font. The word "em" itself no longer having any practical or relevant meaning.
5: Me not doing a good job “preparing my videos”
I try to do a very good job at prepping my videos. 🙂 My apologies if anyone misunderstand some of what I say in the video. I will keep an eye out for other comments to see if it is me delivering the info poorly, or if this is just a case of one person doing their best to bring negativity into my comments. 😅 Either way I appreciate all the awesome support I have received in this course so far, and can’t wait to upload more web dev tutorials. 😊
Nah, you do a great job making things easy to understand. I think so, anyway.
This is the first time I actually understand the difference, thank you, keep up the amazing work ! :)
Everything was perfectly understandable the way you meant. Just ignore specious comments. Your videos are top and you are committed!
I think you're amazing. I just finished my web dev degree and have been going through this series. I have learned 10x what I was taught in class. Thank you so much for all you do.
Well I watched all of these videos twice, and they were so helpful, thanks to you 💗
Dani you're the best 🔥👍
Way, way back in the days of the first moveable type and hot-metal presses an 'Em' space was equivalent to the width of a letter M and a 'En' space was the equivalent to the width of a letter N. Hence the measurement names.
Ayo this is exactly what I was hoping you cover in this series. Thanks for this Dani! You're one of the best teachers for beginners like me
It finally made sense to me. Thank you :)
Hi! Thank you so much for this video. I have tried to watch some others and I still couldn't really understand, but this knocked it out of the park for me! You have an amazing ability to teach and I will be checking out some more videos from your channel.
Awesome video. Thank you. I had to like and subscribe.
Your tutorials are a blessing bro🙂💪
I finally understand this. Thanks.
Impressive class!
Very, very good explanation. Thank you.
This video was a "Mic Drop" for me! BOOM! Thank you!
Glad it helped! 🙂
Thanks 💗
using px for years I finally got what em/rem are :D thank you for the simplicity of explanation. The only thing I am wondering about for the moment is: for example if we want to scale the size of the overall elements in the mobile, should we increase the 62.5% ??? and if so, how we are going to easy know what's the equivalent of 1.7rem in px lol
Thanks dani 🥰🥰🥰
em is traditionally the width of the capitol "M" character on a printing press. It doesn't really work that way with digital fonts. Em is not an abbreviation, it doesn't stand for anything, it's just the name of the letter M.
Thanks, I got ems and rems finally 😅😅😅
Can you post video about framework in css why we use ? What purpose we need it? Is it need framework for design ?
Always happy when there is a new episode. Nice job! Will you apply the BEM convention to the existing project or to a new one? In any case, I'm curious!
I will do a “conversation” lesson where we convert the font units from pixel to REM, and then afterwards I sounds like a good suggestion to do a BEM video 🙂
@@Dani_Krossing Really cool, looking forward to it! 😋
Do you have a video about how to create a php credit card payment?
Isn't EM the width of a single letter M? I thought that's where the name comes from. It's an old typesetting term. Also the letter V in VH and VW stands for "view[port]", not that it matters much.
Yup, that is correct 😉
Great video, thanks em stands for ephemeral unit, from English em quadrat, is a unit in the field of typography, equal to the currently specified point size. not that it makes any difference, thanks!
Question, is 62.5% the right way to do it and what difference does it make if instead I just declare 10px on the root?
Ah yes I probably should have addressed why using 10px is a “no-go”. 😅
It’s because users can change their default font-size in the browser. So if we were to use “10px”, it would be a static number that can’t be changed by the browsers settings. So by using % instead of px, we still allow the user to change settings in the browser they might need, and have it work properly with our font-size 🙂
@@Dani_Krossing that makes sense now. thanks a bunch man :)
GREAT video, I have one line of PHP at the bottom of these video lessons which tells the time & date. The problem is The time & date are still 10px??????
You would need to wrap the date in a element to get it to work I believe.
@@Dani_Krossing Of course, how STUPED of me! Thank you very much for your time! LOVE your channel.
@@davescorneroftheworld1147 Hehe no worries, most people (including myself) have made that mistake before. 🙂 I'm glad you are enjoying my channel. 😊
Thx🎉. Can we do 10 pix instead of 62,5% ? Isn’t that easier?
Dani himself answered this in a previous question:
"It’s because users can change their default font-size in the browser. So if we were to use “10px”, it would be a static number that can’t be changed by the browsers settings. So by using % instead of px, we still allow the user to change settings in the browser they might need, and have it work properly with our font-size "
We miss you dani drop a vid soon. We want to know how to make the website responsive 🥰
I was unlucky enough to get hit be a really bad and long case of the flu 🤒 I’m starting to feel better so might get back to making videos tomorrow. 🙂
@@Dani_Krossing Take it easy man, feel better then back to us 🥰❤🌷
@@Dani_Krossing could you make a new JavaScript tutorial?☺️
🥰😍🤩
why not use 6.25% instead of 62.5% and then 16rem instead of 1.6rem?
You could do that, and then it would match the pixel amount. However the reason we use 62.5%, is because older browsers that doesn’t support REM, would have extremely small font sizes since the base size is 1px. So 10px is much more manageable in those cases, if there is a lack in browser support. Also, most likely from the perspective of that REM is meant to be seen as a multiplier. 🙂
what is null?
Don’t think I discussed null in this video?
i know, but i want to know about null
Null just basically means that you have no value to point to. So you can create a variable and set it to null if you don’t have a value yet, so you can later on assign a value.
However you don’t necessarily use it every time you wanna create a empty reference. In some cases for example with booleans, you just assign a ‘false’ value on initialisation. Or with strings you assign “” instead.
There are some guidelines for when specifically you use null, but it essentially just means “nothing”. 🙂
thanks👍
NEVER use static units for your font sizes, if your user needs the default size to be larger (or smaller) than 16 pixels, you make your site unusable for them.
rem, em, and % are fine to use, but never vw, vh or px. 😉
Hi Mr.dani , I have a little request = please make a full video on how to publish a website . Plus add google ads to make money through it .