Should You Use Rem Or Em Units
Vložit
- čas přidán 19. 01. 2022
- Full CSS Units Video: • Learn CSS Units In 8 M...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts
Full CSS Units Video: czcams.com/video/-GR52czEd-0/video.html
I always use EM inside components, so, if I change the font-size of this component's root, everything will proportionally change. This always work for me, as long as I define a font-size at the root of the component.
In addition to what you do, I like to scale everything off font size and screen size so on larger screens, everything scales up automatically and things are not tiny on UHD / 4k etc.
Do you happen to know what actually happens when on root element you set rem or em instead of px? I guess it doesn't make sense but in this case does it rely on some fixed value?
@@elvinasss2767 em without any size changes is usually defaulted to 16px
And speaking of font size, you should always use relative units for that, like rem, em, or %, rather than absolute units like px or pt. That way, your site will respect any changes users may have made to the default font size in their browser settings.
When to use EM: Always. Except for the times you know you're independent of your inherited font size - that's where you use REMs.
When to use PX: border widths only.
Your videos are seriously always so good. As a beginner this is extremely informational. Thank you!
Life became easier when I started using rem.
Kyle Bro!!
don't stop making these shorts...
these are really helpful..
This was a great short. You managed to put very useful information regarding this topic in less than a minute. Thank you!
Thanks so much Kyle for clearing that up 💙💙
@Eklavya Jain Wow Thanks so much man you're awesome 💙
It should be noted that changing the root font size is controversial because of browser font size settings.
Your videos are such good quick references
thanks, man!
God bless you!!!!
In general it is a better idea to use rem pretty much all the time. Your design feels more complete and strict if your sizing and spacing is based around an application-wide set of sizes that have one shared base. That's why most css libraries like tailwind, bootstrap, etc deliver sizes based on rem
Very good explanation!😃
You could just do
html {font-size: 62.5%}
Then 1rem = 10px
Nice and concise. Almost like a very informational commercial!
I use pixels..
Im surprised by how well it is explained in just under a minute. thank you
thanks im new and was wondering what the difference was px, rem ,em.
can u make one for height? people use px, VH, %
Rem is useful with dimensions resizing with media queries
You got a new subscriber 👍👍👍👌👌👌
Had a dev insisting on em being the only thing to use. Changed font size for an element and the entire design fell apart. He still insisted em was the way to go and that we should've changed all the sizes, paddings and margins to accommodate this new element font size.
I was confused what you meant by current font size, but I googled it and it said it is the parent font size!
This is the way.
this guy is so good i cant follow his tutorials
I still have no idea why we use either and when's what better. I always get confused and then just use px or vw/wh or %
It's generally bad practice to define a font size with px. This is due to accessibility issues. If someone has difficulty reading small font sizes, they can change their browsers default font size (typically 16px) in the options menu of their browser. If you use rem and em the font size on your webpage will be in terms of their defined default font size. If you define a font size with px on your website then this will override the browser's default size. Basically if someone went through the trouble changing their browser's default font size and you override it, they would probably be upset and not like your website.
@@michaelmccann4867 But why would we want everything to be determined by the user settings, won't this make a lot of pages look terrible? can't the user just zoom in a little?
@@melboro8745 responsive web design through things like flexbox and grid, and media queries etc mean most sites can handle being zoomed pretty far in
I've been a web developer since 2005 and I still use PX because it's simple and easy to understand. I do want to play with REM so I can understand it, not sure how setting a font size to 16px has any negative affect on those with disabilities? If so, that's worth understanding REM if it has an advantage.
Hey, can you do a video on React Router? a lot of tutorials are outdated
Can we decrease default pixel size instead of font size?
Ohhhh thanks
Damn... And I'm still using 'px' like it's 1999 😭
If you use a preprocessor, you can rely on a pxToREM(or EM) function so that you can still think in pixels but use a REM/EM unit
Is it still necessary to use EM and REM over PX? Page zooming feature works just fine with PX-based website. At least in Google Chrome. I believe that would be enough to satisfy relevant WCAG success criteria.
Honestly, I've just tried to set a larger default font-size in the Chrome settings and see no difference on this particular page
The benefit of em and rem over px is scalability, if a user changes his browser font size to something else, rem will change, and em to use scalability based on parent container elements, px will be useful when you need to create something that might break with scalability or is not important to be flexible sized, like for example, an avatar that comes from the backend on a set size like 64px by 64px, it would be interesting for this to never stretch over 64 by 64px, then i would set everything to be pixels on this case.
@@minimovzEt Yeah, I am aware of this. The question is how many people will actually change the font-size on a browser level and not on an operating system level? If you've got a vision impairment you most likely want to change your font size to something else everywhere, not just in the browser. And if you change it in the OS, then every website will scale, even pixel-based. Try it yourself.
And also try changing the font-size in your browser and check the most popular websites - how many of them scale for you?
I've created a food recipe which has an image of a food and more text as the recipes. And all that was used only on HTML, CSS not included.
Tryin 2 learn new to web dev ...using zero to mastery course to learn also jus a bit stuck as i am not a paid member again but usin their free web dev crash course
TLDR - use rems for project scalability
I always use px
Why "Or"?? We can use both of it
content / time = 10/10
❤️❤️
Honestly you should not use any of those,
Instead you should go with VW.
Yes vw, the unit that will keep your design aspect ration ALWAYS!
who's rem?
Thank you! I see so many people using em in cases where the parent font size has no bearing and should have used rem instead.
Yeah I had it reversed. I thought rem did what em does and vice versa. I always read rem as "relative em" instead of root. That led to... a lot of issues I couldn't figure out until now.
cascading unit hell. that's em. always set root to 10px and use rems.
Hm, I normally set root font size to either 8 or 16, but I can definitely see the benefits of using a nice round number like 10. Might have to give that a try in a future project.
Sscrew this im going back 2 wallmart! 2 hard
For font sizing, im going to always use ems because of best accessibility practices. I want my user to have the ability to scale the font to their choice.
em = 16px in my head easy remember, rem is wasting of my brain to calculate :-D
rem is also 16px... the difference is em can be different if you're in something that has different font size
informative but you are vary fast
you should slow down a little bit 😁😁
On russian please😅
Your videos are seriously always so good. As a beginner this is extremely informational. Thank you!