Re: [css-d] Media queries and em's
Related to the topic http://css-tricks.com/zooming-squishes/ -- Kuzeko On 13 January 2013 18:35, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Hi all, I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. The more detailed and up-to-date resources I've found are here http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/ http://viljamis.com/blog/2012/scaling-with-em-units/ http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ So, is there any new findings on the subject, or is just as simple as converting a couple of numbers? (I'm oversimplifying here, but not that much apparently) Did you tried this approach, is there anything I should pay attention to? Thanks in advance for you help. Cheers -- Kuzeko* *I'm not a native English speaker __ 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 and em's
On Jan 14, 2013, at 5:52 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Tedd Sperling wrote: Also, here's a complete site: http://sperling.com/clients/beckyscan/index.php Try changing your zoom levels in your Browser to see the effect. You can't do that with pixels. Edit / preferences / minimum font size = 24px Learn more floats up and obscures text. Philip Taylor Philip: I have not worked on that site for many years -- what Browser are you using? Cheers, tedd _ t...@sperling.com http://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 and em's
On Jan 14, 2013, at 5:00 PM, Felix Miata mrma...@earthlink.net wrote:
On 2013-01-14 15:55 (GMT-0500) Eric composed:
html {font-size: 16px;}
Then all REMs on the page will be 16px no matter what eles.
Not quite. Notwithstanding that styling text in px ignores the wide variation
in effective pixel density and rudely disregards the visitor's optimum text
size, as presumptively established via his UA's default size setting, astute
users with competent UAs can avoid the need to apply zoom to restore some
legibility, at least potentially, via a user stylesheet containing the
following:
-snip-
The result though can be a big mess of overlapping and/or hidden content if
container sizing is also done in px. OTOH, with such styling done in em
and/or rem, much or even all of the adaptability of the natural web, and
rem/em-based styling, is preserved.
Felix:
I often wonder why people don't listen to your wise council?
I know I do and I teach this stuff.
Cheers,
tedd
_
t...@sperling.com
http://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 and em's
Yes, you are right I expressed it the wrong way. So, do you have any particular suggestion? -- Kuzeko On 13 January 2013 21:37, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Kuzeko Web Design - Matteo Lissandrini wrote: Yes, Christian is right, exactly from this observation come my question. How to handle this fact? Is 16px enough widespread to let us hope the design will be coherent through different systems and devices? Did you had some workaround or trick to enact? I think it is vital to accept that, no matter how ubiquitous the relationship between 16px and 1em, it is simply impossible to replace the first by the second (and pro-rata) and achieve your goal. If it /were/ possible, the em would not be the miracle unit that it is : rather, you need to re-think your design, reserving pixels for image dimensions (and, arguably, min- and max-dimensions) and expressing everything else in relative terms : ems, for relative to the current font, aned %, for relative to the parent element. Philip Taylor __ 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/ __ 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 and em's
Kuzeko Web Design - Matteo Lissandrini wrote: Yes, you are right I expressed it the wrong way. So, do you have any particular suggestion? Well, no : not more than I have already said. You might like to look at David Laakso's web site, into which he has been putting considerable effort to make it responsive : http://ccstudi.com/ I have no idea how successful he has been, because I make no use of the web other than via the very old-fashioned technology of a Windows-based PC and twin 19 CRT monitors, but simple tests such as making the browser window as narrow as possible and playing with browser zoom and minumum font size suggest that he has certainly addressed these (admittedly relatively superficial) problems successfully ... Philip Taylor __ 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 and em's
I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Additionally that one does not use the technique I'm researching. On 14 January 2013 11:23, Philip TAYLOR p.tay...@rhul.ac.uk wrote: http://ccstudi.com/ -- Kuzeko __ 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 and em's
Kuzeko Web Design - Matteo Lissandrini wrote: I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Simply because I had occasion to visit it recently and was pleased to see how well it handled the simple tests that I mentioned. I am just a human being, not an encyclopaedia -- I can tell you about the few sites of which I am aware, not the countless trillions of which I am not. I could have referred you to sites of own creation, but that would have been immodest : far better to refer you to a site created by someone with whom I have no connection whatsoever. Additionally that one does not use the technique I'm researching. OK, I stand corrected. Philip Taylor __ 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 and em's
Apologize. I'm sorry if I sounded rude or pretentious, I though that I was missing something about that site. That's it. -- Kuzeko On 14 January 2013 11:56, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Kuzeko Web Design - Matteo Lissandrini wrote: I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Simply because I had occasion to visit it recently and was pleased to see how well it handled the simple tests that I mentioned. I am just a human being, not an encyclopaedia -- I can tell you about the few sites of which I am aware, not the countless trillions of which I am not. I could have referred you to sites of own creation, but that would have been immodest : far better to refer you to a site created by someone with whom I have no connection whatsoever. Additionally that one does not use the technique I'm researching. OK, I stand corrected. Philip Taylor __ 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 and em's (Philip TAYLOR)
I doubt that. em is a unit relative to the current font size.
http://en.wikipedia.org/wiki/Em_%28typography%29
http://en.wikipedia.org/wiki/Em_%28typography%29 says: Thus, em
generally means the point size of the font in question. So if for one
particular font size 1em is 16 pixels, for a font twice as big 1em might
be rather about 32 pixels.
Best
Christian
Christian,
With all due respect you have it wrong in relation to CSS.
Thus, em generally means the point size of the font in question. is correct
for print but not for CSS.
Here's what the W3C spec
http://www.w3.org/TR/css3-values/#font-relative-lengths has to say about it -
Aside from ‘rem http://www.w3.org/TR/css3-values/#rem-unit ’ (which refers to
the font-size of the root element), the font-relative lengths refer to the
computed font metrics of the element on which they are used. The exception is
when they occur in the value of the ‘font-size’ property itself, in which case
they refer to the computed font metrics of the parent element (or the computed
font metrics corresponding to the initial values of the ‘font’ property, if the
element has no parent).
em unit
Equal to the computed value of the ‘font-size’ property of the element on which
it is used.
The rule:
h1 { line-height: 1.2em }
means that the line height of h1 elements will be 20% greater than the font size
of h1 element. On the other hand:
h1 { font-size: 1.2em }
means that the font size of h1 elements will be 20% greater than the computed
font size inherited by h1 elements.
The EM unit is relative to 1) the declared font-size of the element 2) the
font-size of the parent.
This is exactly why I use the REM unit. It is only relative to the font-size of
the root element and is not subject to any other unit.
html {font-size: 16px;}
Then all REMs on the page will be 16px no matter what eles.
When using EM's you can run into problems when the font-size or an element's
parent has a direct and not so nice effect on a child element's font-size.
Eric Miner
e...@minerbits.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 and em's
On 2013-01-14 15:55 (GMT-0500) Eric composed:
html {font-size: 16px;}
Then all REMs on the page will be 16px no matter what eles.
Not quite. Notwithstanding that styling text in px ignores the wide variation
in effective pixel density and rudely disregards the visitor's optimum text
size, as presumptively established via his UA's default size setting, astute
users with competent UAs can avoid the need to apply zoom to restore some
legibility, at least potentially, via a user stylesheet containing the following:
html,
body
{font-size: medium !important}
In my non-testing UAs this will usually result in a rem size of 20px or 24px.
That simplicity could easily be expanded to include much more:
html,
body,
#body,
p,
td,
pre,
code,
li,
dd,
#content,
#main
{font: medium/normal sans-serif !important}
The result though can be a big mess of overlapping and/or hidden content if
container sizing is also done in px. OTOH, with such styling done in em
and/or rem, much or even all of the adaptability of the natural web, and
rem/em-based styling, is preserved.
--
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 and em's
On Jan 13, 2013, at 2:50 PM, John Snippe j...@snippe.ca wrote: On 2013-01-13, at 2:09 PM, Tedd Sperling wrote: Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. If I recall, that would only work if the base fontsize is 16, right? -- John Snippe Well.. that's where you can get into trouble, namely mixing size/measurement types. I make certain that ALL measurements in my layouts are done in em's and nothing else. So, to answer your question, the base font size would be 1em and NOT 16px. As such, all standard measurements of images in pixels translate to ems by using a ratio of 16:1. Is that clear enough? Here's an example (if I didn't provide it before): http://sperling.com/examples/zoom/ Also, here's a complete site: http://sperling.com/clients/beckyscan/index.php Try changing your zoom levels in your Browser to see the effect. You can't do that with pixels. Cheers, tedd _ t...@sperling.com http://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 and em's
On Sun, Jan 13, 2013 at 12:35 PM, Kuzeko Web Design - Matteo
Lissandrini w...@kuzeko.com wrote:
Hi all,
I would like to work on my new project building Responsive layouts making
use of flexible em-based media queries instead of pixel based.
Did you tried this approach, is there anything I should pay attention to?
Kuzeko*
Although I use a different approach, there is nothing wrong with using
em. And as with most any discipline there are many ways to achieve the
goal.
There are a couple of things to keep in mind, among them:
1/ You need a device width meta tag in the head of the document. I
used meta name=viewport content=width=device-width
2/ If you use em then you may want to declare default font-size in
percent on html and use em font-size on selectors
3/ Shoot for the ability to view the site at twice default font-size
[200%] at any device screen width [including on a mobile-device]
/without/ throwing a horizontal scroll bar.
4/ The media query may be px or em-based. I am used @media screen and
(min-width:30em) {#page{width:90%;min-width:90%;max-width:90%}}
Please see source of this simple fast and dirty test page
http://ccstudi.com/site/playpen/layouts/test_37.html
Best,
David Laakso
__
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 and em's
On Jan 13, 2013, at 12:35 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. -snip- So, is there any new findings on the subject, or is just as simple as converting a couple of numbers? (I'm oversimplifying here, but not that much apparently) Did you tried this approach, is there anything I should pay attention to? Kuzeko: I think that is an excellent move. It allows the people with aging vision to see things enlarged, here's an example: http://sperling.com/examples/zoom/ Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. Hope this helps. Cheers, tedd _ t...@sperling.com http://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 and em's
Am 13.01.2013 20:09, schrieb Tedd Sperling: On Jan 13, 2013, at 12:35 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. -snip- So, is there any new findings on the subject, or is just as simple as converting a couple of numbers? (I'm oversimplifying here, but not that much apparently) Did you tried this approach, is there anything I should pay attention to? Kuzeko: I think that is an excellent move. It allows the people with aging vision to see things enlarged, here's an example: http://sperling.com/examples/zoom/ Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. I doubt that. em is a unit relative to the current font size. http://en.wikipedia.org/wiki/Em_%28typography%29 says: Thus, em generally means the point size of the font in question. So if for one particular font size 1em is 16 pixels, for a font twice as big 1em might be rather about 32 pixels. Best Christian __ 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 and em's
Yes, Christian is right, exactly from this observation come my question. How to handle this fact? Is 16px enough widespread to let us hope the design will be coherent through different systems and devices? Did you had some workaround or trick to enact? -- Kuzeko On 13 January 2013 20:28, Christian Kirchhoff privat k-r...@t-online.de wrote: Am 13.01.2013 20:09, schrieb Tedd Sperling: On Jan 13, 2013, at 12:35 PM, Kuzeko Web Design - Matteo Lissandriniweb@ kuzeko.com wrote: I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. -snip- So, is there any new findings on the subject, or is just as simple as converting a couple of numbers? (I'm oversimplifying here, but not that much apparently) Did you tried this approach, is there anything I should pay attention to? Kuzeko: I think that is an excellent move. It allows the people with agingvision to see things enlarged, here's an example: http://sperling.com/examples/zoom/ Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. I doubt that. em is a unit relative to the current font size. http://en. wikipedia.org/wiki/Em_%28typography%29 says: Thus, em generally means the point size of the font in question. So if for one particular font size 1em is 16 pixels, for a font twice as big 1em might be rather about 32 pixels. Best Christian __ 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/ __ 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 and em's
Kuzeko Web Design - Matteo Lissandrini wrote: Yes, Christian is right, exactly from this observation come my question. How to handle this fact? Is 16px enough widespread to let us hope the design will be coherent through different systems and devices? Did you had some workaround or trick to enact? I think it is vital to accept that, no matter how ubiquitous the relationship between 16px and 1em, it is simply impossible to replace the first by the second (and pro-rata) and achieve your goal. If it /were/ possible, the em would not be the miracle unit that it is : rather, you need to re-think your design, reserving pixels for image dimensions (and, arguably, min- and max-dimensions) and expressing everything else in relative terms : ems, for relative to the current font, aned %, for relative to the parent element. Philip Taylor __ 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/
