Something to add, the other day I was trying to serve a different
background-size for iPad portrait view, using the min-width throws the fixed
layout into fluid layout for desktop version.
Example:
/* desktop version */
#container: width :980px
@media all and (min-device-width: 780px) and (orientation:portrait)
{
#container{width:98%; background-position: left 165px;
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
-o-background-size:100% auto;}
}
The " (orientation:portrait)" part doesn't matter. I don't quite understand why
the "min-width" and "min-device-width" could affect the container width for
desktop version.
Once I changed it to this the 980px stay.
@media only screen and (orientation: portrait) and (device-width: 768px)
tee
On Sep 19, 2010, at 5:42 PM, Philippe Wittenbergh wrote:
>
> On Sep 20, 2010, at 2:01 AM, Alan Gresley wrote:
>
>> Philippe Wittenbergh wrote:
>>>
>>> @media screen and (max-device-width: 480px), screen and (max-width: 480px)
>>> {... } is a comma separated list of media queries and is perfectly
>>> acceptable
>>> it applies to (screen) devices with a max-device-width of 480px
>>> OR
>>> (screen) devices with a max-width of 480px
>>>
>>
>>
>> So how does David's query work?
>
>
> As advertised on the box. One of the two -or both- media queries will return
> true, in which case the rules are applied. If both return false, the rules
> are not applied.
>
> @media screen and (max-device-width: 1920px), screen and (max-width: 480px)
> {... }
> This will always return TRUE on _your_ monitor (given what you stated about
> the width your monitor).
>
> Similarly,
> @media screen and (max-device-width: 2560px), screen and (max-width: 480px)
> {... }
> Same as the first one.
>
> @media screen and (max-device-width: 1280px), screen and (max-width: 480px)
> {... }
> This will only return TRUE if you window is 480px wide or less
>
> @media screen and (max-device-width: 1280px), screen and (min-width: 2560px)
> {... }
> will only return TRUE if you make you window quite a bit larger than you
> monitor.
>
>
>
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/
>
______________________________________________________________________
css-discuss [cs...@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/
