Problems with "Not" Operator in Media Query

Question

I am working on a responsive site and my client wants certain styles to apply to the desktop at 768px but NOT to tablets at that size. I've tried multiple media queries but I can only get Firefox to cooperate. Chrome, Safari and IE all ignore the media query. Here is what I tried.

 @media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
    /* styles for desktop only here */
 }

I think it has to do with the "not" operator but I don't see that I'm doing anything wrong. It's also worth mentioning that the ipad (in my simulator) ignores the media query which is exactly what I want. I just can't get the Chrome, Safari and IE on my desktop to read the dang thing.

Answer 1

Each and every Media Query string separated by commas should be fully formed (I'm not aware that in the spec anything carries over from one to the next ...although some browsers may support "shortcuts" here, it's prudent to stick to the lowest common denominator: the spec). (Among other things this makes testing easier since simple text mods allow you to test one Media Query at a time.) And of course "only" and "not" are mutually exclusive options. So I think the syntax should be

@media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {

(xxx-device-width: and xxx-width: [with inclusion or exclusion of "-device"] refer to the screen width and the viewport/layout width respectively [which are typically the same for "desktop" devices, and for most handhelds if <meta name="viewport" content="width=device-width"> was specified, but may not be the same for smartphones without the "viewport" specification in the HTML source of the page). I don't typically see a mixture of the two in a single Media Query statement, and so [even though I haven't yet tried to understand this example in detail] I suspect something is a bit awry.)