CSS3媒体查询不起作用？

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

<!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; 
}

来源

2013-06-24 Eric Diviney

与非媒体查询'媒体查询一个前body'规则再次尝试。 –

它不是由于工作的cascade的性质，因为你@media规则先于你的正常的身体规律，从而导致无法由于它们具有相同的特异性而被重写（一种类型选择器 - body）。您只需切换周围的订单，例如

body { 
    color:blue; 
}  

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

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

来源

2013-06-24 21:23:56 Adrift

我认为最好用最大宽度来演示它，然后当你调整窗口大小时它会改变 – raam86

@ raam86：更新了我的小提琴，我实际上发布了错误的一个：p – Adrift

想到了！保持检查编辑，看看你是否更新了小提琴 – raam86

CSS3媒体查询不起作用？

回答

相关问题