问题上的CSS媒体查询

Question

我对CSS媒体查询的问题..

使用desktop.css和ipad.css在2个独立的文件我实现一个HTML页面，并希望他们.. 在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 CSS得到正确应用在iPad上，由于某种原因，桌面的CSS不应用.. 不知道什么是错的“@media不仅屏幕......”

我提到http://www.w3.org/TR/css3-mediaqueries

，它说“ ke的存在在媒体查询开始时，yword'not'会否定结果。即，如果媒体查询在没有“不”关键字的情况下为真，则它将变为假，反之亦然。 “

但由于某些原因，桌面从未呈现的样式......请help..Thank你..

** * ****EDITED* *

可能是什么问题，用这种方法？

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

Answer 1

您是否尝试过类似

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

所以，失去了not因为这是什么使得规则适用于一切，但屏幕即你的情况桌面。

Answer 2

only screen意味着只是屏幕，没有其他东西呈现这一点。 not否定这一点，以便除screen之外的所有内容都将呈现它。

Answer 3

做，要么是这样的：

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

凡desktop.css开始没有任何@媒体查询规则，并用ipad.css @media screen and (max-width: 768px) {/*your code here*/}规则开始。

或简单地链接到这两个，你会像平时一样，让ipad.css在desktop.css下面。

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

哪里还启动desktop.css文件，而无需任何@传媒规则，并ipad.css与@media screen and (max-width: 768px) {/*your code here*/}规则开始。

这样，所有的桌面浏览器都会读取desktop.css文件，支持媒体查询的浏览器也会读取ipad.css（当屏幕分辨率低于768px时）。

如果你在你的编辑，IE8描述的，下面将做它的一个烂摊子使用它们，这是很好这篇文章=>http://dev.opera.com/articles/view/safe-media-queries/

中说明如果你想IE浏览器也重新大小和了解你的媒体查询，解决问题的唯一方法是通过使用这个轻量级的JavaScript库=>http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/，会做的魔力为你（基本上使可能的工作机智IE就像一个正常的浏览器）:)

问题是你只能让IE忽略媒体查询，这样它就不会搞乱你的网站外观。为了让IE理解媒体查询和重新调整大小，并善于改变窗口大小，您需要我提到的库中的帮助。

Answer 4

以下链接可能会有帮助。 media-queries at developer.mozilla.org media-queries at css3.info