On 4/18/14, 2:10 PM, Tom Livingston wrote:
On Fri, Apr 18, 2014 at 4:03 PM, Freelance Traveller
<edi...@freelancetraveller.com> wrote:
On Fri, 18 Apr 2014 17:53:37 +0100, Tim Dawson <t...@ramasaig.com> wrote:
I've been following another thread (Phone breaks....), and I can see the
advantage of using 'ems' rather than pixels for media queries.
So if I'm using 'px' now but would like to change to 'em', how do I
calculate how many 'em' to allow for my 960px starting point ?
I like using this: http://riddle.pl/emcalc/
As I understand it, there are pixels and there are pixels. Many devices today
have high resolution screens that pack four to nine times the usual number of
pixels onto a display. As this makes pixel sizes *really* small, using these
pixels for CSS sizes makes no sense. Imagine how tiny, say, a 100 pixel wide
image would be on a phone display that’s 1920 pixels wide!
For this reason, a CSS pixel on these screens is computed to be a combination of
four to nine actual pixels so that the displayed image size is closer to what
you’d expect. This is really only a headache for bit-mapped images like PNG or
JPEG, as fonts and other vector graphics scale up nicely - but that’s another
topic for discussion entirely.
For the moment, then, you can continue to use the rough approximation of 16px to
1em. But this equivalence does not always hold, even on a desktop. Which is why
you have to be super careful about mixing ems and pixels.
Hoping this does not confuse you further,
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
