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

【问题标题】：When applying media queries, nothing is getting adjusted应用媒体查询时，没有任何调整
【发布时间】：2021-08-22 14:21:06
【问题描述】：

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

谢谢。

【问题讨论】：

当您的设备是手机时会发生这种情况？笔记本电脑还是台式机呢？
@media only screen and (min-width: 768px){ Your Styles} // 当你只使用时，你必须使用并定义屏幕大小
@SuneelKumar 我尝试在手机上调整它并调整我的桌面宽度。
@kiran 我已经尝试过了，遗憾的是它不起作用。
@icantfindmyspider，我提出了一个解决方案，希望对你有所帮助

标签： html css media-queries

【解决方案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;
  }
}

&lt;div class="above-email-box"&gt; Demo Text&lt;/div&gt;

逻辑运算符

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 表示当你添加样式时，它会在满足min-width 条件后显示样式，如果你定义@ 987654328@您的样式适用于宽度为 500px 及以上而不是以下的屏幕

【讨论】：

【解决方案2】：

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

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

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

【讨论】：