Question

I'm trying to use media query in css3 to make my website responsive, it's seems I did all right but it doesn't work, here's my code:

@media screen and (max-width: 480px) {
body{
  background-color: blue;
}
}
}
body {
  background-color: #fcfcfc;
}

and the header:

    <link rel="stylesheet" type="text/css" href="style.css">

the css file work, but all the media querys doesn't...

Answer 1

See the cascading order.

Sort according to importance (normal or important)

Both rules are normal

and origin

Both are author rules

Sort rules with the same importance and origin by specificity of selector

body and body are identify selectors.

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.

The background-color: #fcfcfc; rules comes after background-color: blue; so it overwrites it.

Order is important. Reverse the order of the rules.

(You also have an extra } which causes a syntax error. Remove it.)

body {
  background-color: #fcfcfc;
}

@media screen and (max-width: 480px) {
  body {
    background-color: blue;
  }
}

Answer 2

Below code should work.

body {
  background-color: #fcfcfc;
}

@media screen and (max-width: 480px) {
    body{
      background-color: blue;
    }
}

Answer 3

CSS styles are prioritised by many things, order is one of them. Also, there was one extra }.

body {
    background-color: #fcfcfc;
}

@media screen and (max-width: 480px) {
    body {
        background-color: blue;
    }
}

and the header

<link rel="stylesheet" type="text/css" href="style.css">

Answer 4

You have too many closing tags and media queries must run after your general styling. https://jsfiddle.net/o8qcuyzb/

body {
  background-color: #fcfcfc;
}

@media screen and (max-width: 480px) {
body{
  background-color: blue;
}
}

<body></body>

Answer 5

The reason it does not work is given correctly and in detail by Quentin. It is because the order is important in CSS.

If you say set a property for the same element twice in a CSS file, then one that comes later is applied. So if you have,

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

body { background-color: red; }

in the same file, the body tag will inherit the red background-color (even for screen sizes < 480px). Just putting the media query after will solve the issue.

Another work around I use in media queries is to include the !important rule. SO, in the following case, body tag will have white background-color for screen sizes < 480px and red background-color otherwise.

@media (max-width: 480px) {
 body { background-color: white !important; }
}

body { background-color: red; }

So, when it comes to media queries I find it useful to enforce the property using !important rule so that I don't have to worry about the order, as often the media queries are added later on. But it is not a good practice, so use judiciously as it makes further debugging difficult.

Also, remove that extra closing curly bracket }!

Answer 6

我认为您没有添加元视口标记，请检查您的Html文件。

<meta name="viewport" content="width=device-width, initial-scale=1">

why css3 media query doesn't work?

6 个答案:

why css3 media query doesn&#39;t work?

6 个答案:

why css3 media query doesn't work?