1

我有一个关于 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 not only screen ...”有什么问题

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

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

但由于某种原因，桌面从不呈现样式...请帮助..谢谢..

** * ****已编辑**

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

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

4 回答 4

1

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

于 2011-10-04T06:08:08.050 回答
0

only screen意味着只有屏幕，没有其他东西可以呈现这个。否定这not一点，以便一切screen都渲染它。

于 2011-04-23T09:02:14.207 回答
0

你有没有尝试过类似的东西

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

所以，失去了，not因为这就是使规则适用于除屏幕之外的所有东西的原因，即在您的情况下是桌面。

于 2011-04-23T09:05:41.213 回答
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 及以下版本会弄得一团糟，这篇文章中有很好的解释 => 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 理解媒体查询并重新调整大小并适应窗口大小的变化，您需要我提到的库的帮助。

于 2011-04-23T17:29:35.293 回答