5 ms·
Root EM Using CSS3 "rem" Units for "Elastic Pixels"
- gandalfar 14y agoIf I try to zoom the screen on chrome/increase font size the boxes/buttons stay the same size. This looks like accessibility issues.
- pdw 14y agoThis doesn't work at all in my Firefox: http://i.imgur.com/O1gUL.png http://i.imgur.com/O1gUL.png
- ars 14y agoWhat is it supposed to look like? Because it looks like that to me too, and I figured it was supposed to.
- crazygringo 14y agoI 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 14y agoThe 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>.
- fpp 14y agoand a JSFiddle (not mine) to play around with rem units
- cicloid 14y agoShould this be in production? Is anyone using this on production?
- gkoberger 14y agoThis 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 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.
- ori_b 14y ago'px' are already not defined in terms of actual pixels by CSS. I don't see why this is necessary or interesting.
- rsanchez1 14y agoI 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 14y agoWhen 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.