Why are my CSS3 media queries not working?

问题

In the styles.css, I am using media queries, both of which use a variation of:

/*--[ Normal CSS styles ]----------------------------------*/

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

    /*--[ Mobile styles go here]---------------------------*/
}

The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn\'t shown at all on a phone. Instead, I just see the default CSS.

Can anyone point me in the right direction?

回答1:

All three of these were helpful tips, but it looks like I needed to add a meta tag:

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

Now it seems to work in both Android (2.2) and iPhone all right...

回答2:

Don't forget to have the standard css declarations above the media query or the query won't work either.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

回答3:

I suspect the keyword only may be the issue here. I have no issues using media queries like this:

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

回答4:

i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css

here is an example :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Link line as simple as above line.

回答5:

Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing. Proper media query should look like this:

@media screen and (max-width: 1024px) {}

回答6:

Make sure your css comments all use this markup /* ... */ -- which is the correct comment markup for css according to MDN

I had copied bootstrap 4 media queries straight from their docs and every query is labeled with the same javascript style comment markup // !

Furthermore, IntelliJ text editor allowed me to comment out specific lines of css in a LESS file but automatically used //. It's no freeware so I assumed it had it right. There's a preference menu for correcting this behavior.

Also, validate your css with a trustworthy online validator. Here's one by W3

回答7:

I use a few methods depending. In the same stylesheet i use: @media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.

回答8:

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

回答9:

For me I had indicated max-height instead of max-width.

If that is you, go change it !

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

回答10:

I encountered this issue recently too, and I later found out it was because I didn't put a space between and and (. This was the error

@media screen and(max-width:768px){
}

Then I changed it to this to correct it

@media screen and (max-width:768px){
}

回答11:

Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS variables don't work in media queries (by design).

回答12:

Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...

@media whatever {
    #child { display: none; }
}

But adding the parent to match some other CSS further up the page, this works...

#parent > #child { display: none; }

Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?

回答13:

The sequential order of css code also matters, for example:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

the above code will not working because the executed order. Need to write as following：

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

回答14:

It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use Ctrl + 0 to reset the zoom level.

来源：https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working