Question on CSS Media Query

问题

I have a question on CSS media query..

I am implementing a HTML page using desktop.css and ipad.css and want them in 2 separate file.. In desktop.css, I use @import url("ipad.css"); and also add @media not only screen and (device-width:768px) block which has the actual desktop styles..

So desktop.css looks like

@import url("ipad.css");

@media not only screen and (device-width:768px)
{
//Desktop styles
}

Now while the iPad CSS gets applied correctly on the iPad, for some reason the CSS for desktop does not get applied.. Not sure what is wrong with the "@media not only screen ..."

I referred http://www.w3.org/TR/css3-mediaqueries

and it says " The presence of the keyword ‘not’ at the beginning of the media query negates the result. I.e., if the media query had been true without the ‘not’ keyword it will become false, and vice versa. "

But for some reason, the desktop never renders the styles...Please help..Thank you..

*******EDITED**

What might be the issue with using this approach ?

@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);

回答1:

Have you tried something like

@media only screen and (device-width: 768px) { /* desktop styles here */ }

So, lose the not as that is what's making the rule apply to everything but the screen i.e. the desktop in your case.

回答2:

Following link could be helpfull. media-queries at developer.mozilla.org media-queries at css3.info

回答3:

only screen means that just screen and nothing else renders this. The not negates this so that everything but screen will render it.

回答4:

Do it either this way:

  <style type="text/css">
   @import url("desktop.css"); 
   @import url ("ipad.css"); 
   </style>

Where desktop.css starts without any @ media query rules, and ipad.css starts with @media screen and (max-width: 768px) {/*your code here*/} rule.

Or simply link to both like would you normally do, having ipad.css below desktop.css.

<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
<link rel="stylesheet" type="text/css" href="css/ipad.css"/>

Where also you start the desktop.css file without any @ media rules and ipad.css starts with a @media screen and (max-width: 768px) {/*your code here*/} rule.

This way, all desktop browsers will read the desktop.css file, and browsers that support media queries will also read the ipad.css (when the screen resolution is below 768px).

If you use them as you describe in your edit, IE8 and below will make a mess of it, it is well explained in this article => http://dev.opera.com/articles/view/safe-media-queries/

And if you want IE to also re-size and understand your media queries, the only way to solve the problem is by using this lightweight JavaScript library => http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ that will do the magic for you (and basically make possible to work wit IE like with a normal browser) :)

The problem is that you can only make IE ignore the media queries so that that it wont mess up your sites look. To make IE understand media queries and re-size and adept with changes in window size you need help from the library I mention.

来源：https://stackoverflow.com/questions/5763024/question-on-css-media-query

标签

javascript

html

css

w3c

media-queries