Question

我有以下代码：

@media (min-width: 1200px) {
  .color {
    color: blue;
  }
}

@media (min-width: 992px) {
  .color {
    color: red;
  }
}

@media (min-width: 768px) {
  .color {
    color: green;
  }
}

@media (max-width: 767px) {

}

<div class="color">Wow ji</div>

无论屏幕尺寸如何，Wow ji仅以绿色显示。我在这做错了什么？

Answer 1

在CSS中，它是最后应用的相应样式，因此在您的代码中，只要屏幕至少为768px，它就会显示为绿色。

您需要在第一次测试中设置max-width，或者按相反的顺序设置它们。

Answer 2

因为您所说的是768px或更高，您希望.color为绿色，您需要更换媒体查询的顺序或使用max-width

Answer 3

你的语法和用法都很糟糕，每次都不一样我建议这样做：

@media screen and (max-width: 768px) { // or whatever screen size
    .color {
        color: green;
    }
}

最好在HTML中添加<meta> viewport，以使您的媒体查询正常工作。
一些文档：
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers

Answer 4

max-width是显示这些样式的最大宽度。宽度超过指定数字的屏幕将不使用与该规则关联的样式。同样，min-width是显示这些样式的最小宽度。比指定数字窄的屏幕将不使用与该规则关联的样式。我已使用max-width更改了您的代码，现在它可以正常处理所有媒体查询，只需调整浏览器的大小

 @media ( min-width : 1200px) {
  .color{
    color: blue;
  }
}

@media ( max-width : 992px) {
  .color{
    color: red;
  }
}

@media(max-width:768px){
  .color{
    color: green;
  }
}

@media(max-width:767px) {
  .color{
    color: yellow;
  }
}

<div class="color">Wow ji</div>

CSS：在不同的媒体查询中使用相同的类

4 个答案: