文本的最大高度和颜色变化

Question

我正在尝试让 h1 标签的文本从白色变为黑色。我正在尝试使用 max-height 媒体查询，但我没有得到任何改变。

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;
  }
}

<h1>text<h1>

Answer 1

像这样删除 "and"：

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

Answer 2

试试这个

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

或者如果不指定屏幕类型

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

Answer 3

这是 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>

文本的最大高度和颜色变化

max-height and changing color of text

html

css

media-queries