应用媒体查询时，没有任何调整

Question

我非常困惑，因为我很确定我已经正确设置了它。它不会在我的 phone 上和调整屏幕时将字体设置为 10 像素。我错过了什么吗？这是代码：

.above-email-box {
  /* aligns text to the center with position absolute */
  text-align: center;
  position: absolute;
  margin-top: 90px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Glory', sans-serif;
  font-family: 'Klee One', cursive;
  font-size: 30px;
}
@media only screen (min-width: 768px) {
  .above-email-box {
    font-size: 10px;
  }
    }

谢谢。

Answer 1

为了运行移动设备的媒体查询，您需要将 min-width 更改为 max-width，如下所示

@media (max-width: 768px) {
  .above-email-box {
    font-size: 10px;
  }
}

当您的屏幕宽度低于 768px 时，它将 font-size 更改为 10px

Answer 2

.above-email-box {
  /* aligns text to the center with position absolute */
  text-align: center;
  position: absolute;
  margin-top: 90px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Glory', sans-serif;
  font-family: 'Klee One', cursive;
  font-size: 30px;
}

@media only screen and (max-width: 768px) {
  .above-email-box {
    font-size: 10px;
  }
}

<div class="above-email-box"> Demo Text</div>

逻辑运算符

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

你要有意识地去定义max-width&min-width，有时候会让人迷惑，min-width的意思是当你往里面添加样式的时候，它会显示[=13之后的样式=] 条件满足，如果你定义 min-width:500px 你的样式适用于屏幕宽度 500px 及以上不低于

应用媒体查询时，没有任何调整

When applying media queries, nothing is getting adjusted

html

css

media-queries