Question

所以我试图将我的目标转向响应式设计，并且看到了这个＆＃34;简单＆＃34;应该定位所有iPhone的媒体查询。尝试了它，在Firefox和Chrome中进行了测试，结果都没有成功。我使用了新的＆＃34;响应式设计＆＃34;在Firefox中的工具，并没有工作，所以然后我尝试只调整broswer窗口，这也没有工作。我也尝试在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;
}

Answer 1

由于cascade的性质，它不起作用，因为您的@media规则先于您的常规正文规则，导致它被覆盖，因为它们具有相同的特异性（一个类型选择器 - {{ 1}}）。你只需要改变顺序，例如

body

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

CSS3媒体查询不起作用？

1 个答案: