Re: [css-d] Media Queries: How many pixels make an em ?
Thanks to all those who have replied. Changing the media query limits to ems at the rate of 1em = 16 pixels worked well. Likewise for div widths and anywhere with default text size. But widths, margins (in fact any dimension you care to name) went haywire in headings h? with a different font-size. All my font-sizes are percentages. Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with several decimal places of ems (which probably convert to sub-pixel dimensions). What do others do ? Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On Saturday, April 19, 2014 01:27:12 PM Tim Dawson wrote: I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with several decimal places of ems (which probably convert to sub-pixel dimensions). What do others do ? This is a terrific use for rem. ems are always the font size, so as the font size increases, so does the size of an em. However, a rem is the font-size on the root element (html), which means that it doesn't change size throughout the page. ---Tim __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 8:27 AM, Tim Dawson t...@ramasaig.com wrote: Changing the media query limits to ems at the rate of 1em = 16 pixels worked well. Likewise for div widths and anywhere with default text size. But widths, margins (in fact any dimension you care to name) went haywire in headings h? with a different font-size. All my font-sizes are percentages. Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with several decimal places of ems (which probably convert to sub-pixel dimensions). What do others do ? I use ems for everything. I find: 1. Browsers handle several significant decimal places without any noticeable problem. 2. Headings h? using ems present extremely well without any noticeable problem. I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. 3. ALL measurements, including margins and paddings, work well without any noticeable problems. The *only* problems I have ever encountered has been mixing measurement types. My advise, pick something and stay with it. 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. Here's my write-up on it: http://sperling.com/examples/zoom/ HTH's 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/
Re: [css-d] Media Queries: How many pixels make an em ?
apr 19 2014 16:00 Tedd Sperling t...@sperling.com: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. Here's my write-up on it: The downside is unacceptable to me, as ems for image width doesn’t respect zoom only text”. I’d use percentages for width instead. __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were 2.5 times too high. So conversion for h1 has to be 1 em = 40px to get the same on screen appearance. If that's wrong I haven't understood ems at all. 3. ALL measurements, including margins and paddings, work well without any noticeable problems. The *only* problems I have ever encountered has been mixing measurement types. My advice, pick something and stay with it. I'll give it a go 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. That's a new idea to me, I've used % for some time. I'll try it. Here's my write-up on it: http://sperling.com/examples/zoom/ HTH's I'm sure it will. Thank you. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 4:19 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were 2.5 times too high. So conversion for h1 has to be 1 em = 40px to get the same on screen appearance. If that's wrong I haven't understood ems at all. That sounds confusing. I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. 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/
Re: [css-d] Media Queries: How many pixels make an em ?
Hi gang: Is anyone else receiving inappropriate pics with this subject line? 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/
Re: [css-d] Media Queries: How many pixels make an em ?
Den 19.04.2014 16:00, Tedd Sperling wrote: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. I find there is something wrong/missing in that statement, as images scale with browser-zoom no matter how we define sizes. Of course no harm done in setting image dimensions in 'em', but not setting dimensions works equally well. And, in images 'width' and 'height' attributes it is pixels anyway ... if those are used to speed up page-stabilization. Having images scale with text-size is not what I would call good practice, as that makes text-only zooming pretty useless for end-user. I only define 'max-width' for images, to make sure they stay within available space regardless of screen/window/page width, and for this I use '%' of container width. The rest I leave to end-users. regards Georg __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On 19/04/2014 22:56, Tedd Sperling wrote: On Apr 19, 2014, at 4:19 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16 px the new margin/padding sizes were 2.5 times too high. So conversion for h1 has to be 1 em = 40px to get the same on screen appearance. If that's wrong I haven't understood ems at all. That sounds confusing. I don't see why. My understanding is that an 'em' originated as the width of the letter 'M' at whatever font size is under consideration. It's a relative measure. So in a larger font size an em must be larger, and therefore equivalent to more pixels than in a smaller font size. I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. If you set your font-sizes in ems then I think you are treating the em as a constant (normally 16px). Though I notice you actually use descriptive names such as 'xx-large' in at least some instances. I also spotted some margins and padding in px. I've been reading http://webtypography.net/2.1.1 where there's a nice example (near the bottom of the page) of font-size set in pixels, where the em undoubtedly scales with font-size. Possibly the same thing happens when font-sizes are expressed in %, so I'll have to try ems for font sizes instead. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 8:11 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. If you set your font-sizes in ems then I think you are treating the em as a constant (normally 16px). Though I notice you actually use descriptive names such as 'xx-large' in at least some instances. I also spotted some margins and padding in px. Yeah, that's because I haven't redone my site in years. It's a case of do what I say, not what I have done. Eventually I'll make my site only ems measurement. Thanks for reminding me. 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On Apr 19, 2014, at 7:00 PM, Georg ge...@gunlaug.com wrote: Den 19.04.2014 16:00, Tedd Sperling wrote: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. I find there is something wrong/missing in that statement, as images scale with browser-zoom no matter how we define sizes. Of course no harm done in setting image dimensions in 'em', but not setting dimensions works equally well. And, in images 'width' and 'height' attributes it is pixels anyway ... if those are used to speed up page-stabilization. The thing that was missing is I should have added that *all* measurements are done in ems and thus no scaling difference between text and images thereby holding the layout static. Having images scale with text-size is not what I would call good practice, as that makes text-only zooming pretty useless for end-user. While respecting your opinion (I've read your post for many years and you provide great advice). I wouldn't call it Good or Bad practice. For example, if you have poor eyesight (i.e., older) and just want to see the page larger by using zoom, then it's good practice -- don't you think? I only define 'max-width' for images, to make sure they stay within available space regardless of screen/window/page width, and for this I use '%' of container width. The rest I leave to end-users. That's one way to do it. But I still think that practice can confuse older users. I know if I were to zoom something so I could see it better (as I often do), it would confuse me if suddenly the *layout* became broken and text/graphics didn't hold their respective positions. But what do I know? I'm just an old guy. Cheers, tedd PS: However, please note that Browsers' zooms scale different. IOW, zoom levels (i.e., magnification) for one Browser doesn't always match the zoom level for another -- there are scaling differences. Or least that's what my old test have shown -- however, those test were taken many years ago. ___ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
Den 20.04.2014 04:14, Tedd Sperling wrote: The thing that was missing is I should have added that *all* measurements are done in ems and thus no scaling difference between text and images thereby holding the layout static. Which is what I object to. Text-only zoom should not be made to behave as Full-Page zoom. Besides, static can be understood as the opposite of responsive, which, if I understand you correctly, makes your practice both counterproductive and hopelessly out of date when we look at the wide range of screens/devices most layouts have to work reasonable well across. Having images scale with text-size is not what I would call good practice, as that makes text-only zooming pretty useless for end-user. While respecting your opinion (I've read your post for many years and you provide great advice). I wouldn't call it Good or Bad practice. For example, if you have poor eyesight (i.e., older) and just want to see the page larger by using zoom, then it's good practice -- don't you think? Nope. Browsers' Full-page zoom works that way regardless, and that built-in functionality doesn't need any help from us. All you have achieved by sizing images in 'em', is to literally disable text-only zoom in those browsers that have that option. Knowingly disabling /any/ well-working browser option is bad practice in my book, and it is way more confusing to people of all ages and (dis)abilities than what you further down call broken layout. I only define 'max-width' for images, to make sure they stay within available space regardless of screen/window/page width, and for this I use '%' of container width. The rest I leave to end-users. That's one way to do it. But I still think that practice can confuse older users. I know if I were to zoom something so I could see it better (as I often do), it would confuse me if suddenly the *layout* became broken and text/graphics didn't hold their respective positions. Anything one isn't used to, can be confusing at first. Age isn't a good excuse here, although one can expect that most younger people do get past the state of being confused a few seconds quicker than older people ... at least that is my experience in working with and discussing these things with end-users of all ages and (dis)abilities - only seconds... The only time I size images in 'em', is when a really small image of text shall line up with the text that surrounds it. Like for instance my own signature at bottom of articles I write. That, and similar minor adjustments of images using 'em', is something I also sometimes find necessary in order to make everything /appear/ correct in context - even if it actually isn't. But what do I know? I'm just an old guy. Well, I am not sure which one of us should say welcome to the club :-) PS: However, please note that Browsers' zooms scale different. IOW, zoom levels (i.e., magnification) for one Browser doesn't always match the zoom level for another -- there are scaling differences. Or least that's what my old test have shown -- however, those test were taken many years ago. Same full-page zoom function, but different step-height, yes. Does not really matter, as most end-users use only one browser on each device they use, so it is always the same behavior on each screen to each of them - unless someone breaks it. Only we designers/developers/coders compare between browsers on a somewhat regular basis, and I can't see any real problems going from Full-Page zooming in one browser to Full-Page zooming in another, in browsers on my test-lists that have such a functionality... http://www.gunlaug.com/contents/basics/compatible.html regards Georg __ 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/
Re: [css-d] Media Queries: How many pixels make an em ?
On 2014-04-18 17:53 (GMT+0100) Tim Dawson composed: 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 ? Most browsers ship with a 16px default font size, making one rem unit 16px. Unless you change it, an em will remain 16px on body for most users. So simply divide 960 by 16 to get 60em if you haven't made a change, or use 60rem if you have. For users whose default is not 16px, the em will scale to whatever that size happens to be, which is the beauty inherent in using em, allowing your design to remain intact while the content size automatically scales to what the user needs and/or wants for optimal accessibility and usability, not to mention friendliness. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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/
Re: [css-d] Media Queries: How many pixels make an em ?
On 2014-04-18 17:53 (GMT+0100) Tim Dawson composed: 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 ? Most browsers ship with a 16px default font size, making one rem unit 16px. Unless you change it, an em will remain 16px on body for most users. So simply divide 960 by 16 to get 60em if you haven't made a change, or use 60rem if you have. For users whose default is not 16px, the em will scale to whatever that size happens to be, which is the beauty inherent in using em, allowing your design to remain intact while the content size automatically scales to what the user needs and/or wants for optimal accessibility and usability, not to mention friendliness. http://www.impressivewebs.com/understanding-em-units-css/ -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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/
Re: [css-d] Media Queries: How many pixels make an em ?
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/
Re: [css-d] Media Queries: How many pixels make an em ?
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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
Re: [css-d] Media Queries: How many pixels make an em ?
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/
