1

因此，我试图将目标瞄准响应式设计，并看到了这个应该针对所有 iPhone 的“简单”媒体查询。试过了，在 Firefox 和 Chrome 中测试过，但都没有成功。我在 Firefox 中使用了新的“响应式设计”工具，但它没有用，所以我尝试调整浏览器窗口的大小，但它也不起作用。我还尝试在 chrome 中调整浏览器窗口的大小，但也被证明是不成功的！任何帮助表示赞赏！首先是我的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>CSS Media Queries</title>
        <link rel="stylesheet" type="text/css" href="test.css" media="screen">
    </head>
    <body>

    <p>Hello there, if this is blue, the responsive css is not working, however if it is red, then it is working!</p>
    </body>

</html>

现在对于我的 CSS：

@media only screen and (max-width : 320px) {
body{
    color:red;
    }
}

body{
    color:blue;
}
4

1 回答 1

3

由于cascade的性质，它不起作用，因为您的@media规则在您的常规主体规则之前，导致它被覆盖，因为它们具有相同的特异性（一种类型选择器 - body）。您只需要切换顺序，例如

body {
    color:blue;
}    

@media only screen and (max-width: 320px) {
   body {
   color:red;
   }
}

http://jsfiddle.net/Adrift/sCWWD/2/

于 2013-06-24T21:23:56.087 回答