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

Question

我的 CSS 媒体查询不起作用。

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

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

我也加入了

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

在头部

你能找出我在这里做错了什么吗

如果有人可以提供帮助，我真的很感激

Answer 1

你的风格应该是有效的。你可能会混淆min-height 和max-height

如果您希望在视图缩小到 400 像素或更少时更改样式，请使用 max-height: 400px，如果您希望在视图大小调整到 400 像素以上时更改样式，请使用 min-height: 400px

但是

如果您使用的 CSS 库正在使用 .container-fluid，您的选择器实际上可以工作，但它不能覆盖现有样式，要解决此问题，您可以执行以下操作之一（或全部）：

1. un-neat 方式，在您的属性中添加 !important。
2. 把你的 css after css 库已经加载，所以你的 css 有更高的优先级。所以<link href="LIBRARY FIRST"/> then <link href="your css"/>
3. 使用与库完全相同的选择器，而不是只使用.container-fluid { }，有时它写为.something .something-2 .container-fluid { }。在 CSS 中，选择器越长，它获得的优先级就越高。

这是一个工作示例：尝试调整浏览器的大小

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/

希望对你有帮助

Answer 2

你必须使用!important。如果你覆盖现有的引导类

.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;
    }
}

或者如果您不想使用 !important 试试这个，假设您想将 @media 应用到 div

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

你可以使用下面的css

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

让我知道这是否有效

Answer 3

如果您正在研究高度，那么您的代码正在运行，请检查以下代码 正在使用 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>