CSS3媒体查询不工作？_Css_Media

CSS3媒体查询不工作？

css

CSS3媒体查询不工作？,css,media,Css,Media,所以我试图将我的目标放在响应性设计上，看到了这个“简单”的媒体查询，它应该针对所有iPhone。尝试过，在Firefox和Chrome上测试过，结果都没有成功。我在firefox中使用了新的“响应式设计”工具，但这不起作用，因此我尝试调整broswer窗口的大小，但也不起作用。我还尝试过在chrome中调整浏览器窗口的大小，但也没有成功！感谢您的帮助！首先是我的HTML： <!DOCTYPE html> <html> <head> &l

所以我试图将我的目标放在响应性设计上，看到了这个“简单”的媒体查询，它应该针对所有iPhone。尝试过，在Firefox和Chrome上测试过，结果都没有成功。我在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>

由于的性质，它不起作用，因为您的

@media

规则先于常规主体规则，导致它被覆盖，因为它们具有相同的特殊性（一个类型选择器-

主体

）。你只需要改变一下顺序

body {
    color:blue;
}    

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

在媒体查询之前，使用非媒体查询

正文

规则再试一次。我认为最好使用“最大宽度”来演示，然后在调整页面大小时它会改变window@raam86：更新了我的小提琴，实际上我贴错了：P想是这样！一直在检查编辑，看你是否更新了小提琴Yetyu你是我的英雄。哈哈，谢谢！

body {
    color:blue;
}    

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