Confused on the practicality of using rem

HTML/CSS
1

Hello,

I just watched video 5 on Part 2 of Mosh’s CSS and HTML course (around 10 minute mark), and I am slightly confused.

I am confused on the practicality of using em/rem. I understand sizing a layout by % and vw/vh because they are scalable to both mobile phones and desktops. But with em/rem, it sounds like they are only sized relative to the font size. So when you change the size of the window or view the layout on a much smaller device, it will still be the same size. It feels like the scaleability issues of using pixels are also shared with using em/rem if you are not changing the default font size, is that true?

Also, when we set HTML to 62.5% to change the multiplication from 16 to 10, won’t that be messed up when you change the default font size to something bigger or less than 16?

Any answers would be greatly appreciated.

2

Yes you can change the default font size and i’m pretty sure that affects em/rem measurements. I havn’t found much scalability problems with them though cause you can do1.3 rem or 1.33rem. I mostly use rem for big blocks that i wanna space out and wanna see how good it looks and don’t wanna have to type 200px, 250px 275px, i can just type lower numbers with rem.

Like a block 70% vw on desktop is fine but on phone it’s taking too much space especially if it has text. This is where you might set computers to 70% but phones to 90% or i might add 1rem horizontal padding.

1 Like
3

Gotcha, its a little confusing right now but im sure some experince with help me understand the practicality of rem. Thank you!