Thank you very much!! This one works (combination of portriat/landscape fails also). @media only screen and (max-width: 480px), only screen and (min-device-width : 768px) and (max-device-width : 1024px)
Maybe it's obvious to others however it was not for me and I can now see where my confusion came from after reading a number times (before my original post) the spec of media quires in w3.org/TR/css3-mediaqueries. 1. I do see the " If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false." 2. In the css3-mediaqueries examples, the comma is used to separate different media, e.g., screen, projection, speech. 3. #2 could be a blind spot when you want to target "only screen" and thus assume 'and' is the only and logical choice. The example in this site brings clarity. http://protofluid.com/?c=mediaQueries tee On Nov 9, 2010, at 10:00 PM, Micky Hulse wrote: > On Tue, Nov 9, 2010 at 8:59 PM, tee <weblis...@gmail.com> wrote: >> ...<snip>... >> My various tests show that it's not possible to have more than 2 rules put >> together. > > Hi! > > Sounds like a fun project that you are tackling! > > I am not sure I can help much, but if you have time to browse the net, > maybe the info on via these links will be of some help: > > 1. > "W3C Media Queries" > <http://www.w3.org/TR/css3-mediaqueries/> > > 2. > "Mobile-friendly: The mobile web optimization guide" > <http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/> > > 3. > "ProtoFluid: Rapid Prototyping of Adaptive CSS and Responsive Design." > <http://protofluid.com/> > > 4. > "Smashing Magazine: How To Use CSS3 Media Queries To Create a Mobile > Version of Your Website" > <http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/> > > From the W3C site: > > [[ > > Several media queries can be combined in a media query list. A > comma-separated list of media queries. If one or more of the media > queries in the comma-separated list are true, the whole list is true, > and otherwise false. In the media queries syntax, the comma expresses > a logical OR, while the ‘and’ keyword expresses a logical AND. > > ]] > > Based on what I am reading above, if I am understanding it correctly > (I am 3 glasses of wine deep atm) maybe your logic is a little off in > terms of one of the bits of logic being false, so that makes the whole > statement false? You might play around with Protofluid app and work > with the comma vs. the AND (or combo of both.) > > I hope that helps! > > Cheers, > Micky > > -- > Micky Hulse > Web Content Editor > The Register-Guard > 3500 Chad Drive > Eugene, OR 97408 > Phone: (541) 338-2621 > Fax: (541) 683-7631 > Web: <http://www.registerguard.com> > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
