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

Question

我非常困惑，因为我很确定我已经正确设置了它。它不会在我的手机上和调整屏幕时将字体设置为 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

.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 意味着当你添加styles 进去，它在满足 min-width 条件后显示样式，如果你定义 min-width:500px 你的样式适用于屏幕宽度 500px 及以上不下面