

Root EM Using CSS3 "rem" Units for "Elastic Pixels" - falava
http://jsbin.com/acide4/8

======
gkoberger
This was true a few years ago. Haven't all major browsers made it so that when
you zoom in, it does actually zoom px (as well as images, etc)? (example:
<http://cl.ly/1O2d3s1Y3R213O1B0U1x>)

Meaning that, basically, you use the following rules:

    
    
      px = you want it to be x pixels when not zoomed at all
      em = you want it to be relative to the parent div (ex: parent is 10px + child is 1.1em = child is 11px)
    

Personally, I find em to be a bit too susceptible to breakage since they're
relative to the size of the parent (which is relative to the size of their
parent, etc).

Using rem is interesting, however I disagree with most of what was said in
this post.

------
crazygringo
I don't get it. This technique "succeeds"... in that trying to zoom in/out of
the page is broken, so pixels are truly staying pixels.

But that defeats all the principles web sizing is based on. You should
virtually never write CSS that is dependent on the physical pixels of the
device. I can't even think of a case where you would want to.* Write code for
logical pixels ("px"), and let the browser/device do all the
zoom/dpi/retina/etc. calculations to give the user the size that makes sense
for their display.

This is regression, not progress. The author says "px unit's don't scale"...
No, they _do_ scale, that's the whole point. The author's solution maps
logical pixels to physical pixels, which is a bad idea.

* Sole exception being resolution of images (normal, retina, etc.), but that has nothing to do with "rem" units.

~~~
salmanapk
The broken zoom-in/out is probably a bug and should be fixed soon. I think
you're confusing rem with vw/vh, rem has nothing to do with pixels AFAIK. 1em
is equal to the font-size of the element you're applying it to while 1rem is
always equal to the font-size of the root element i.e., <html>.

------
ori_b
'px' are already not defined in terms of actual pixels by CSS. I don't see why
this is necessary or interesting.

------
pdw
This doesn't work at all in my Firefox: <http://i.imgur.com/O1gUL.png>

~~~
ars
What is it supposed to look like? Because it looks like that to me too, and I
figured it was supposed to.

------
cicloid
Should this be in production? Is anyone using this on production?

------
gandalfar
If I try to zoom the screen on chrome/increase font size the boxes/buttons
stay the same size. This looks like accessibility issues.

------
fpp
and a JSFiddle (not mine) to play around with rem units

~~~
dag11
You forgot the link.

------
rsanchez1
I like the rem unit, but for a different reason. If I want to change the font
size of everything at once, just change the size of the root element.
Everything follows from that.

~~~
ars
When would you ever want to do that?

If you have a specific segment of the page sure - but then you can just use
percents.

But your entire site? I don't think you'll ever have to do that, certainly not
often enough to need a whole new unit.

