On Apr 4, 2014, at 6:38 PM, Felix Miata <mrma...@earthlink.net> wrote:
> On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed: > >> Looking for insight into (and potential correction to) the latest Firefox >> browsers inflating the overall size/resolution of webpages. We use a >> mobile first responsive upwards, and in the newest Firefox browsers, what >> is a reasonable font size in every other browser becomes ludicrously large >> in Firefox on high resolution monitors. From what I'm seeing on the dev >> pages, this is intentional for sites that do not use large font sizing >> (most) at the high resolutions. But we are doing so in our newest sites. > >> I'd rather not deliver FF specific font sizing, but will if I must. Any >> ideas? Fixes? Things to avoid? > > You're using px for sizing text and its containers, right? If yes, stop doing > that, and the "problem" will disappear. In the first place, it's only the > user who is in position to determine "reasonable font size", which size is > presumptively the size configured as her personalizable browser default, CSS > medium. When you respect a user's default by leaving the base size unaltered, > and only apply relative sizing via keywords, em, rem or % to elements that > actually need a contextual sizing adjustment, the integers-only Gecko device > px to CSS px ratio and display density/"high" resolution are non-issues. > > The math involved with not using px is simple enough. Just think of one px as > .0625rem (1/16). If you want a block to be 960px wide, divide by 16, which > makes it 60rem. In viewports in which the as-shipped 16px default remains in > effect, 60rem will be 960px, while in those using higher densities, more px > will be used, but your design proportions will be preserved. > -- > As usual, Felix provides excellent advice. Let me add that you should also define your images dimensions by the same em standard, as demonstrated here: http://sperling.com/examples/zoom/ Cheers, tedd _______________ tedd sperling t...@sperling.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/
