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.

Edward Anthony
  • 3,354
  • 3
  • 25
  • 40
  • Check this out: http://www.sitepoint.com/css3-rem-units/ ...Very well explained. – Ani Dec 20 '13 at 22:53
  • Thanks Ani that explain how rem calculate based on the root element, that is 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. – Edward Anthony Dec 20 '13 at 23:18
  • @MrLister Thanks for your reply, Could you check this for me? http://www.vilepickle.com/blog/2012/03/13/00142-font-sizing-css-em-vs-px-vs-rem#.UrTOeWQW2A0 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. – Edward Anthony Dec 20 '13 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](http://jsfiddle.net/4GTyV/). Change the width of the browser window and see how the contents change. – Mr Lister Dec 20 '13 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 '13 at 23:31
  • @MrLister I get why people use rem instead pixel. Because on mobile devices we need smaller text than desktop version. By using rem, I can use media query to change font-size to 95% when it come to mobile width. Change 1 font on , it change everything on the page. CMIW – Edward Anthony Dec 21 '13 at 00:14

1 Answers1

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

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • this has better explanation rem depend on DPI and on retina screen it may differ https://stackoverflow.com/a/11803273/5154741 – Mirza Obaid Feb 14 '20 at 10:53