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 ? The problem you're going to run into is that an 'em' is dependent on the font size, e.g., 1 em at a font size of 12 points is going to be different from 1 em at a font size of 24 points. >To add to my confusion my Google Nexus7 tablet claims a screen resolution of >1920x1200px, which >is the same as my desktop monitor. But in portrait format it responds to a >media query with >max-width 600px. The DPI of the Nexus is much higher than the monitor, of >course. >My viewport meta tag is: >'<meta name="viewport" content="width=device-width; maximum-scale=1; >minimum-scale=1;" />' >Despite this it would seem the scaling isn't actually 1, but more like 1:1.6 >(960/600). >Would I be best off making a guess (say 1em = 40px) and then seeing how it >looks and adjusting >empirically ? I could make it work with my Nexus7 and Galaxy phone, perhaps, >but what about all >the others out there that I can't possibly test ? According to w3schools (http://www.w3schools.com/css/css_font.asp) - who are not affiliated with w3c, and whose reliability has been shown previously to be suspect - the 'default' size for normal text (the size you get if you don't otherwise set a size) is 16 px = 1 em. Given that the default assumption for (desktop) screen resolution nowadays seems to be 96 px = 1 inch, that corresponds to a nominal font size of 12 pt. However, I don't actually think it matters. The whole point - as I understand it (and I have no doubt that I'll be corrected if I misunderstand) - of using em instead of pt or px is that (a) you can change the actual size of everything while keeping relative size relationships the same by just changing the font size on the HTML or BODY element, and (b) as long as you don't set the font size with !important, a user who desires text to be a different size (perhaps because of vision problems) can apply user-defined style(s) (in some browsers) and get his preferred size, without committing violence on the layout you've designed (subject, of course, to any min-width issues). -- Jeff Zeitlin, Editor Freelance Traveller The Electronic Fan-Supported Traveller® Fanzine and Resource edi...@freelancetraveller.com http://www.freelancetraveller.com http://freelancetraveller.downport.com/ ®Traveller is a registered trademark of Far Future Enterprises, 1977-2014. Use of the trademark in this notice and in the referenced materials is not intended to infringe or devalue the trademark. Freelance Traveller extends its thanks to the following enterprises for hosting services: CyberNET Web Hosting (http://www.cyberwebhosting.net) The Traveller Downport (http://www.downport.com) ______________________________________________________________________ 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/
