我对CSS媒体查询有疑问..
我正在使用desktop.css和ipad.css实现一个HTML页面，并希望它们位于2个单独的文件中。 在desktop.css中，我使用@import url（“ipad.css”）;并且还添加@media屏幕和（设备宽度：768px）块，它具有实际的桌面样式..
所以desktop.css看起来像
@import url("ipad.css");
@media not only screen and (device-width:768px)
{
//Desktop styles
}
现在，当iPad在iPad上正确应用时，出于某种原因，桌面的CSS无法应用。 不确定“@media不仅仅是屏幕......”还有什么问题。
我提到http://www.w3.org/TR/css3-mediaqueries
并且它说“在媒体查询开头存在关键字'not'否定了结果。即，如果媒体查询在没有'not'关键字的情况下为真，则它将变为false，反之亦然。 “
但由于某种原因，桌面永远不会呈现样式......请帮助..谢谢..
的 的 ** * **** EDITED 的 < EM> * *
使用这种方法可能会出现什么问题？
@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);
答案 0 :(得分：1)
答案 1 :(得分：0)
only screen意味着只是屏幕，而没有其他任何东西呈现这一点。 not否定了这一点，以便screen之外的所有内容都会呈现它。
答案 2 :(得分：0)
你有没有试过像
这样的东西 @media only screen and (device-width: 768px) {
/* desktop styles here */
}
所以，丢失not，因为这使得规则适用于除屏幕之外的所有内容，即您的情况下的桌面。
答案 3 :(得分：0)
这样做：
<style type="text/css">
@import url("desktop.css");
@import url ("ipad.css");
</style>
其中desktop.css在没有任何@ media查询规则的情况下启动，而ipad.css以
@media screen and (max-width: 768px) {/*your code here*/}规则。
或者只是像往常一样链接到两者，在desktop.css下面有ipad.css。
<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
<link rel="stylesheet" type="text/css" href="css/ipad.css"/>
您还可以在没有任何@ media规则的情况下启动desktop.css文件，并且ipad.css以@media screen and (max-width: 768px) {/*your code here*/}规则开头。
这样，所有桌面浏览器都会读取desktop.css文件，支持媒体查询的浏览器也会读取ipad.css（当屏幕分辨率低于768px时）。
如果你按照你在编辑中描述的那样使用它们，IE8及以下版本会搞得一团糟，这篇文章很好地解释了=＆gt; http://dev.opera.com/articles/view/safe-media-queries/
如果您希望IE也重新调整大小并理解您的媒体查询，解决问题的唯一方法是使用此轻量级JavaScript库=＆gt; http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/这将为你带来魔力（并且基本上可以像使用普通浏览器一样使用IE）：）
问题是你只能让IE忽略媒体查询，这样它就不会搞乱你的网站外观。为了让IE了解媒体查询并重新调整大小并熟悉窗口大小的变化，您需要我提到的库的帮助。