rem unit, how it scale based on screen size

Question

I'm designing a website using rem unit, some people said, rem unit change the size based on screen size.

I try to drag the browser window to mobile size, and see from the chrome develop (the computed style)

And what I see is, it's still same like the desktop size. same 21px. It doesn't change.

Can you explain, what does rem unit do?

Thanks.

Answer 1

The rem unit means the font size of the root element, which is the html element in HTML documents. That is, it is the “root em”. It has absolutely nothing to do with screen size.

The only thing that you gain by using rem rather than em is that you avoid doing some calculations yourself. Instead of taking into account the nesting of elements that may have different font sizes, you can anchor your font size settings to the font size of the root element. And what you lose is that some oldish browsers do not know the rem unit, so your rem based font size settings are ignored by them.

The practical way to make font sizes depend on screen size or window size (two different concepts) is to use CSS @media queries to set font-size (in some units) depending on the screen or window size (usually the width).