为什么我的媒体查询不起作用？

Question

My CSS looks like something below:

@media  (max-device-width:480px) {
    {
        body{background: red;}
   }
}

when I resize the browser to iphone width, I dont see body get red background. Do you guys know what is happening. I also tried @media (max-width:480px)

FYI I have meta view post tag also set up as:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">

Answer 1

You have to set it to this

@media only screen and (max-width:480px) {

    body{background: red;}

}

EDIT Forgot to explain my changes.

I removed your extra brackets that were inside the media query. But most importantly changed it so that it is only targeting the screen(as stated is optional). And changed max-device-width to max-width as you have already stated in your meta tag that the width should be the value of the device width.

Answer 2

max-width is right ( max-device-width would be the screen size, not the window size) but you have extra braces. Take them out:

@media  (max-width:480px) {
    body {
        background: red;
    }
}