Oh look, 10 x 10 pixel box... Or is it?
Oh good, more rectangles!
I love working in
px unit's don't scale... So we're stuck with the complexity of
em units right?
Say hello to
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
remSupport and Progressive Enhancement
Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9! ... Please help test mobile and other browsers here.
px's in the CSS this example - should - degrade gracefully to the
px unit when
rem is not supported.
Chris Jacob: @_chrisjacob