有关CSS媒体查询的问题

Question

我对CSS媒体查询有疑问。

我正在使用desktop.css和ipad.css实现HTML页面，并希望将它们放在2个单独的文件中。在desktop.css中，我使用@import url（“ ipad.css”）; 并添加@media不仅屏幕和具有实际桌面样式的（device-width：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

它说：“在媒体查询的开头出现关键字'not'会否定结果。即，如果没有'not'关键字的媒体查询为true，则它将变为false，反之亦然。”

但是由于某些原因，桌面永远不会呈现样式...请帮助。谢谢。

** * **** 编辑 * *

使用这种方法可能会有什么问题？

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

Answer 1

以下链接可能会有所帮助。 developer.mozilla.org上的 媒体查询css3.info上的媒体查询

Answer 2

only screen表示仅屏幕，没有其他东西呈现此内容。 在not否定这一点，以便一切，但screen会呈现它。

Answer 3

你尝试过类似的东西吗

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

因此， not失去它，因为这就是使规则适用于除屏幕以外的所有内容（即您所用的桌面）的原因。

Answer 4

通过以下方式之一进行操作：

  <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*/} 768像素@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*/} 768像素@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了解媒体查询并重新调整大小并适应窗口大小的变化，您需要我提到的库的帮助。