Oh look, 10 x 10 pixel box... Or is it?
Oh good, more rectangles!
Buttons anyone?
1×Zoom:
I love working in px units.
But alas! px unit's don't scale... So we're stuck with the complexity of % and em units right?
Wrong.
Say hello to rem
rem
CSS3 introduces a few new units, including the rem unit, which stands for "root em" (or "font size of the root element").
Jonathan Snook, has a great explanation of Font Sizing with rem.
By scaling the "root em" to 1px (a 1:1 em-to-px ratio) we get a "new" kind of unit... ELASTIC PIXELS!
By increasing the single "root em" font-size, ALL our elastic pixel's increase!
Zooming isn't as easy as it looks... John Resig (of jQuery fame), explains Sub-Pixel Problems in CSS...
To cut a long story short; sticking to whole numbers avoids browser rounding bugs.
1px * 2 = 2px - magic!
What's the use of 2x zoom?
More reading... High DPI Web Sites and Designing for iPhone 4 Retina Display: Techniques and Workflow
Skipped the reading? Me too... Basically, iOS resolutions:
The iPhone 4 has -webkit-min-device-pixel-ratio: 2 ...yep that's 1px * 2!
Screen DPI (really PPI) is something the Responsive / Adaptive Web Design community should care a whole lot about. With "Elastic Pixels" we might just be able to build layouts with the simplicity of px's and scalability of em's. W00T!
rem Support and Progressive Enhancement
Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9! ... Please help test mobile and other browsers here.
By declaring rem's after px's in the CSS this example - should - degrade gracefully to the px unit when rem is not supported.
Chris Jacob: @_chrisjacob