【问题标题】:Media query is not working when i try to change the color [closed]当我尝试更改颜色时,媒体查询不起作用[关闭]
【发布时间】:2021-05-17 02:56:44
【问题描述】:

1.mediaquery.css

body {
  color: red;
}
.title {
  font-size: 6rem;
}

.subtitle {
  font-size: 4rem;
}

@media all and (max-width: 500px) {
  body {
    color: blue;
  }
}

当我尝试将颜色更改为蓝色时,媒体查询不起作用,但当最大宽度降至 500 像素时,它并没有改变颜色;

【问题讨论】:

  • 寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
  • 您可能在级联的下方设置了具有更高特异性的文本颜色。例如<p> 设置为颜色:#000.;或更广泛影响层次结构中身体下方的区域,例如 main { color: #000; }。需要查看完整代码以提供进一步帮助。
  • 您好,您提供的代码运行良好。您需要在显示错误的 sn-p 中包含足够的代码。

标签: html css media-queries


【解决方案1】:

只使用@media 而不是@media all。 我在这里运行了一个示例代码,只使用@media 你可以检查。

body{
  background-color: blue;
}

@media (max-width: 1200px){
  body{
    background-color: red;
    color: white;
  }
}
<html>
<head>
</head>
<body>
  <h1>Hello this is my code</h1>
</body>

【讨论】:

  • @media screen 会更好。
  • 是的,我们也可以使用@media Screen,这也有效
  • 是的,当然,这是有效的。我只是指出了一个“更具体”的可能性。 @RahulNikam
猜你喜欢
  • 1970-01-01
  • 2015-09-29
  • 2023-03-31
  • 1970-01-01
  • 2013-02-28
  • 2023-03-09
  • 2011-09-25
  • 2018-05-14
  • 2022-08-23
相关资源
最近更新 更多