6

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.

6
  • Check this out: sitepoint.com/css3-rem-units ...Very well explained.
    – Ani
    Dec 20, 2013 at 22:53
  • Thanks Ani that explain how rem calculate based on the root element, that is <html> But it not explain how rem behave on different screen sizes. As I explained previously, there have to be some special with rem unit, because all it does is just same as pixel does. I thought it scale based on screen size. Dec 20, 2013 at 23:18
  • @MrLister Thanks for your reply, Could you check this for me? vilepickle.com/blog/2012/03/13/… He explain " I used to use 'px' sizing exclusively, but I realize for different screen sizes it became problematic. Therefore I switched to using 'em' " By reading it I took the conclusion, that rem scale as the browser width change. Dec 20, 2013 at 23:23
  • Well, that is not the case and you can check for yourself by making a fiddle using the units. Or if you're lazy, use my fiddle. Change the width of the browser window and see how the contents change.
    – Mr Lister
    Dec 20, 2013 at 23:30
  • By the way, I had it wrong in my first comment. In reality, vw is 1% of the browser width and rem is the font size of the html element. Thanks to @onetrickpony for pointing that out.
    – Mr Lister
    Dec 20, 2013 at 23:31

1 Answer 1

10

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).

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.