关于CSS媒体查询的问题

Question

我有一个关于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 CSS在iPad上正确应用，但由于某种原因桌面的CSS没有得到应用.. 不确定“@media 不仅是屏幕......”出了什么问题，

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

上面写着“媒体查询开头出现关键字‘not’会否定结果。即，如果媒体查询为真而没有 ' not' 关键字会变成 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

您是否尝试过类似

@media only screen and (device-width: 768px) {
/* 这里是桌面样式 */
因此

，丢失not，因为这就是使规则适用于除屏幕（即您的情况下的桌面）之外的所有内容的原因。

Answer 3

only screen 意味着只有 screen 而没有其他东西来渲染它。 not 否定了这一点，以便除 screen 之外的所有内容都将渲染它。

Answer 4

可以这样操作：

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

desktop.css 开头没有任何 @ 媒体查询规则，ipad.css 开头为
@media screen 和 (max-width: 768px) {/*您的代码在此处*/} 规则。

或者像平常一样链接到两者，将 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屏幕和(max-width: 768px) {/*您的代码在此处*/}规则开始。

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

如果您按照您在编辑中描述的方式使用它们，IE8 及以下版本会将其弄乱，本文对此进行了很好的解释 => http://dev.opera.com/articles/view/safe-media- >

如果您希望 IE 也重新调整大小并理解您的媒体查询，解决问题的唯一方法就是使用这个轻量级 JavaScript 库 = http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ 这将为您带来魔力（基本上使与 IE 一起工作成为可能，就像使用普通浏览器一样）:)

问题是你只能让 IE 忽略媒体查询，这样它就不会弄乱你的网站外观。为了使 IE 理解媒体查询并调整大小并适应窗口大小的变化，您需要我提到的库的帮助。