时间戳

首页 > 解决方案 > 当我尝试更改颜色时，媒体查询不起作用

html - 当我尝试更改颜色时，媒体查询不起作用

问题描述

1.mediaquery.css

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

.subtitle {
  font-size: 4rem;
}

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

链接到屏幕

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

标签： htmlcssmedia-queries

解决方案

使用只是@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>

推荐阅读