Philippe Wittenbergh wrote:
On Sep 19, 2010, at 3:41 PM, Alan Gresley wrote:
Upon checking your page I noticed that whole chunks of the media queries are
invalid. This one,
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
.... }
should be as.
@media screen and (max-device-width: 480px) and (max-width: 480px) { .... }
It is late. I am tired. Point me to where it says that in the CSS3 specs.
sorry, but
@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
[quote]
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.
[/quote]
right before example VI
http://www.w3.org/TR/css3-mediaqueries/#media0
Philippe
Ok, I thought I was wrong after reading the above and I realize that I
do have to much faith in the validator. Then I thought about it and
tested and surprised myself.
I have a monitor with a resolution of 1920px by 1080px (lots of space)
and the viewport is about 1700px in width.
Testing offline, if write this CSS,
@media screen and (max-device-width: 1920px) {
body {background: lime;}
}
the background is lime in my browser. If I change the CSS to this,
@media screen and (max-device-width: 1921px) {
body {background: lime;}
}
and refresh the page, the background is now white (my set default
background-color).
Now if I now write the below CSS, refreshed and adjusted my viewport
to about 1700px wide,
@media screen and (max-device-width: 1920px) and (max-width: 1800px) {
body {background: lime;}
}
the background is white. If I now widen the viewport, when it reaches
1800px, I notice the background changes to lime.
I now realize that what I was expecting was the opposite to what I
thought would happen. That is having a simpler style for a UA with
less device pixels or when a window is narrowed to a minimum width or
is smaller due to lower screen resolution. This type of query is
achieved by the following. Note that device-width is min- and not max-.
@media screen and (min-device-width: 1920px) and (max-width: 1920px) {
body {background: lime;}
}
So how does David's query work?
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
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/
