Question

我希望身体根据375视口，376-640视口和默认视口显示正文文本颜色。

这是代码

.dllm {
  color: green;
}
@media screen and (max-width: 640px) and (min-width: 376px) {
  .dllm {
    color: red;
    padding-top: 100px;
  }
}
@media only screen and (min-width: 375px) {
  .dllm {
    color: yellow;
    padding-top: 100px;
  }
}

<body class="dllm">

  aslkjfdlkdasjflk;asjflksajlfk aslkjfdlkdasjflk;asjflksajlfk

</body>

css insdie 375覆盖了一切，任何人都知道这是什么问题？

https://jsfiddle.net/rq34ptx4/

Answer 1

您已使用min-width:375px，然后再次使用min-width:376px这就是他们崩溃的原因。而是使用max-width:375px，即您希望body text-color更改为375px viewport width及以下。另一个声明应该是从min-width:376px到max-width:640px，即更改声明值之间的文本颜色。

尝试以下代码，

body {
    color:green;
}

@media only screen and (min-width: 376px) and (max-width: 640px){
  body{
    color:orange;
  }
}
@media only screen and (max-width: 375px){
  body{
    color:red;
  }
}

<body>

aslkjfdlkdasjflk;asjflksajlfk
aslkjfdlkdasjflk;asjflksajlfk

</body>

375媒体查询覆盖640视口

1 个答案: