CSS媒体查询问题答案

【问题标题】：Question on CSS Media QueryCSS媒体查询问题
【发布时间】：2011-08-11 09:43:50
【问题描述】：

我有一个关于 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'否定了结果。即，如果媒体查询在没有'not'关键字的情况下为真，它将变为假，反之亦然。 "

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

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

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

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

【问题讨论】：

标签： javascript html css w3c media-queries

【解决方案1】：

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

【讨论】：

【解决方案2】：

以这种方式进行：

  <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*/} 规则。

或者像你通常做的那样简单地链接到两者，将 ipad.css 放在 desktop.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 理解媒体查询并重新调整大小并适应窗口大小的变化，您需要我提到的库的帮助。

【讨论】：

非常感谢..我刚刚尝试了代码..但出于某种奇怪的原因，它似乎在 Firefox 中运行良好，但在 IE8 中却不行..
尝试改变 CSS 样式表的顺序 - 从桌面样式开始，没有任何花哨的规则，然后将 ipad 样式放在 @media 屏幕和 (max-width: 768px) { }.
Hey Husar ..实际上我无法更改 CSS 样式表的顺序 ..原因是我将 @import 用于 ipad.css，它必须在开头，我希望 2 驻留在单独的文件中（即桌面和 ipad）
嗯...在 ipad 的开头导入桌面一个 :) 或者只是放弃导入并将它们用作两个单独的文件。包含您的桌面分辨率样式的桌面和 ipad 之一 - 从上述媒体查询规则开始 - 您低于 764 像素的规则。
即使在 IE8 中也没有帮助..由于某些原因，IE8 不理解@media screen and (min-width: 768px)

【解决方案3】：

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

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

因此，请丢失 not，因为这使得规则适用于除屏幕之外的所有内容，即您的桌面。

【讨论】：

我尝试了同样的方法（@media only screen and (device-width: 768px)），但它在桌面（IE 和 FF）上不起作用...

【解决方案4】：

only screen 表示只有屏幕而不是其他任何东西渲染它。 not 否定了这一点，因此除了 screen 之外的所有内容都会呈现它。

【讨论】：