Stop using pixels in your CSS! How and why to use REM and EM.
HTML-код
- Опубликовано: 15 сен 2021
- Pixels are problematic when it comes to accessibility on the web. In this video, we talk about pixels and what happens when accessibility tools are turned on, and I provide you with an alternative option.
.
.
.
.
.
Music from Uppbeat (free for Creators!):
uppbeat.io/t/sonda/were-in-it...
License code: QEOATAWHSOBYILVT 
Наука
Wow. Most tutorials just say REMs and EMs are better practices without any explanation. But you showed the why. Thanks alot
Glad it was helpful!
Thanks for this video, i was stuck in my learning due to this concept of em and rem and px, but you made just the right video as to why use them instead of px, i recommend this to other programmers.
Great simple example, thank you!
Really good explanation, thanks for posting!
Thanks for this. Cleared many doubts for me. Simple & Effective explanation.
Glad it was helpful!
wow, thank you so much. great video!
Thank you, after about 2 years, Finally I understood it fully :)
Great to hear!
Thank you! This is great!
Your video was truly helpful and gave me a better understanding of rem's role. If possible, could you please share more practical examples? Thank you in advance.
Thank you very helpful 😉.
So we are just gonna ignore how the "Hi there!" suddenly flew out of that container? How to solve this?
very precise
Great work on your video
Thanks Ajay 😊
thank you so much now i know why my website sucks when i zoom out for more then 100%
thank you :)
Great content ...
Thank you Oseni!
شكرا كان الشرح مفيدا
I did some tests using REM, but I didn't like the idea of the layout changing without any control. When changing the Chrome font to full size, the layout grew so much that it didn't fit the screen. So far, I've only seen it work on examples on youtube, but in practice, I came to the conclusion that it doesn't work well in a real layout. Perhaps it should work in an app layout that is more minimalistic. But I will continue studying, see you later!
I think it's probably best suited to font sizes and then layouts that affect the font spacing! But yeah each use case would be different I guess :-)
agreed, if the website is made with proper font size there would be no need to use zoom in the first place.
I get it for fonts, but for stuff like the containers/boxes in the video, wont we encounter issues like this potentially?
I just cannot imagine it being maintainable/scaleable, that these boxes now have REM and will start colliding with eachother, as soon as the user starts increasing the font size?
Nice content thank you ! Should we use rem for margin and padding too ? I’ve seen websites doing this
I guess it kind of depends on how everything is laid out. You might be able to just use pixels but you can decide what to use when building something and see how it works.
@@IanLenehan yes thank you !
Margins and paddings are better in EM rather than REM. Think of buttons, for example - their paddings should change based on the font size of their content, hence the EM.
How are you able to type and use the curly brackets on a mac?
I have the new macbook air and cant even use them...
Thanks.
Hey, I'm not sure what you mean. You can't see them on your keyboard?
I have a question about media queries max-width why we need to use em instead of px?
For media queries I would say pixels make more sense here
Oh man you deserve millions subscriber❤
Haha thank you!
❤❤
Dude , one doubt... can i use rem in all cases that we use px ?
Hey JP - I would say no, it doesn't apply everywhere. Sometimes you need the fixed values of pixels. I think if you're unsure of where to use it, play around with your site and with the zoom and see what looks off and what doesn't.
The title of this video suggests to stop using pixels. Is that a click-bait? It's like saying to people to stop eating oranges and stick to eating apples. There is a reason why pixels exist. And what has been shown in this video would not provide a desirable outcome on certain platforms where consistency is key. So in this case I could say that if you want to lose total control of your design, then use REM or EM. But if you want to stay in control of it as a developer and not as a user, then use PX. Users often times don't know how to properly use a website and stay in control of it. So therefore it is the job of the developer to make sure that everything is where it is suppose to be and not jumping all over the place as they see it fit. 🙂
You may have misunderstood the message in the video, but all good. I appreciate your opinion!
so use rems, aight thanks
Amazing explanation! This cleared things up a lot. Thank you so much 🫂
You're very welcome!