Question

我正在尝试将h1标记的文本从白色变为黑色。我正在尝试使用max-height媒体查询，但我没有改变。

＆＃13;

h1 {
  position: fixed;
  width: 100%;
  text-align: center;
  color: #eee;
  font-size: 4em;
  background-color: hsla(281, 100%, 7%, 0.3);
  height: 100%;
}
@media and(max-height: 400px) {
  h1 {
    color: #222222;
  }
}

＆＃13;

<h1>text<h1>

＆＃13;

Answer 1

只需删除“和”，就像这样：

@media (max-height: 400px) {
  h1 {
    color: #222222;
  }
}

Answer 2

以下是media query语法：

@media not|only mediatype and (media feature) {
/** CSS Code **/
}

因此and仅适用于mediatype。如果不是不使用它

body {
  margin: 0
}
h1 {
  position: fixed;
  width: 100%;
  text-align: center;
  color: #eee;
  font-size: 4em;
  background-color: hsla(281, 100%, 7%, 0.3);
  height: 100%;
  margin: 0
}
@media (max-height: 400px) {
  h1 {
    color: #222222;
  }
}
@media screen and (max-height: 400px) {
  h1 {
    background-color: red;
  }
}

<h1>text</h1>

Answer 3

试试这个

@media only screen and (max-height: 400px) {
h1 {
color: #222222;
}
}

或者如果没有指定屏幕类型

@media (max-height: 400px) {
h1 {
color: #222222;
}
}

最大高度和更改文字颜色

3 个答案: