CSS：@media 查询的最大宽度不起作用

Question

(It works on other browsers but not chrome)

I want to apply a style only when the browser size is less than 1400px

with max-width not working

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

with min-width its working

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)

Fiddle for this

https://jsfiddle.net/j4Laddtk/

Answer 1

Have you tried adding the viewport in?

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

Working JSFiddle

Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.

Answer 2

Is your browser zoom -ed at different than 100% level ? If so, zoom to 100% ( Ctrl+MouseWheel )

Answer 3

Try this method.

This will target based on device

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

To target based on browser window area

@media screen 
 and (max-width: 1400px) 
 and (min-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

Answer 4

您需要在声明标准后放置 @media 查询

Answer 5

This worked for me

@media screen and (max-width: 700px) and (min-width: 400px) { 
    .heading-left { left: -0.5%; }
}

Answer 6

If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.

If you have

.container {
  color: white;
}

and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.

.container {
  color: white;
}

@media only screen and (max-width: 600px) {
  .container {
    color: pink;
  }
}

So if your media queries are at the top the default colour of white will override the media query for pink.

Answer 7

Another thing that can happen is that you do something really stupid like:

@media only screen and (max-width: 1400)  { ... }

Make sure you put the px to identify what the quantity of your max-width is.

@media only screen and (max-width: 1400px)  { ... }

Not that I've ever been stuck for an hour on something so simple..

Answer 8

@media only screen and (max-width: 1000px) {
  /*Don't forget to add meta viewport in your html*/
}

If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.

Sometimes it's not working because of the browser cache.

Answer 9

the developer tool was saying that the size of the viewport is 1400px but the actual width the css was considering was more than 1400px. Because of this the media query isn't working

Answer 10

This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.

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

More details https://www.w3schools.com/css/css_rwd_viewport.asp

Answer 11

There is one thing I want to add here. (Only applicable if having different CSS files) --> If some values are not applying then check if your CSS file having the media queries is at the bottom inside the element or not. Always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.

Answer 12

For those of you, dear programmers, that none of the above helped let me suggest taking a look back at your html and the naming of your .classes. Improving the classes name worked out for me.