CSS 在 chrome 中测试时媒体查询不起作用

Question

My CSS media query is not working.

.container-fluid {
  background-color: red;
  border: 2px solid blue;
}

@media (min-height: 500px) {
  .container-fluid {
    background-color: green;
    border: 2px solid black;
  }
}

I have also included

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

in the head section

Could you find out anything I did wrong here

Really appreciate if anyone could help

Answer 1

Your style is supposed to be working. You might be confusing min-height and max-height

If you want the style to change when the view has been resized down to 400px or less use max-height: 400px and if you want to change the style when the view has been resized above 400px then use min-height: 400px

However

If your using a css library that is making use of .container-fluid your selector is actually working but it cannot overide the existing style, to fix this you can either do one of the ( or all of it ) following:

1. The un-neat way, adding !important in your properties.
2. Putting your css after the css library has been loaded so your css has higher priority. So <link href="LIBRARY FIRST"/> then <link href="your css"/>
3. Using the exact same selector the library used instead of using just .container-fluid { } , sometimes it's written as .something.something-2.container-fluid { } . In CSS the longer the selector is the more priority it gets.

Here is a working example: Try to resize your browser

body {
  height: 100vw;
  width: 100vh;

  background-color: red;
  border:2px solid blue;
}

@media (min-height: 400px) {

  body {
    background-color: green;
    border:2px solid black;
  }
}

https://jsfiddle.net/masterpreenz/efxuw7mg/4/

hope that helps

Answer 2

you have to use !important .if you override existing bootstrap class

.container-fluid{
    background-color: red !important;
    border:2px solid blue !important;
}
@media(min-height:500px){
.container-fluid{
     background-color: green !important;
    border:2px solid black !important;
    }
}

or if you don't want to use !important try this let's assume you want to apply @media to div

<div class="container-fluid new-fluid"></div>

you can use the following css

.new-fluid{
    background-color: red;
    border:2px solid blue;
}
@media(min-height:500px){
    .new-fluid{
    background-color: green;
    border:2px solid black;
}
}

let me know if this worked

Answer 3

If you are working on height then your code is working, Please check below code which is working on chrome

 .container-fluid { background-color: red; border: 2px solid blue; height: 200px; } @media(min-height:500px) {.container-fluid { background-color: green; border: 2px solid black; height: 200px; } }

 <div class="container-fluid">my div</div>