css - 为什么我的媒体查询没有改变任何东西？

Question

我正在尝试将媒体查询应用于我的网站，但没有任何变化。

我曾尝试更改我的媒体查询在 CSS 流中的位置，但没有成功。

这是代码的具体部分:

.desktop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  width: auto;
  padding: 0 1.5rem;
}

.mobile-header {
  display: none;
}

@media only screen and (max-width: 480px) {
  .desktop-header {
    display: none;
}
 .mobile-header {
   display: flex;
   height: 4rem;
   width: auto;
   justify-content: space-around;
   align-items: center;
 }

}    

我想用只显示图像而不是文本的简化移动页眉替换桌面页眉。目前，一切都没有改变。 html 中的一切看起来都很好，所以我只能认为我在 CSS 中遗漏了一些东西？

提前感谢您的帮助!

Answer 1

我没有发现您的代码有任何问题。绝对没问题!可能有其他冲突代码阻止您的代码按预期显示。

我在这里添加了一些 HTML，它在您的代码中运行良好。

.desktop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  width: auto;
  padding: 0 1.5rem;
}

.mobile-header {
  display: none;
}

@media only screen and (max-width: 480px) {
  .desktop-header {
    display: none;
  }
  .mobile-header {
    display: flex;
    height: 4rem;
    width: auto;
    justify-content: space-around;
    align-items: center;
  }
}

<div class="desktop-header">
  <h1>Desktop Header</h1>
</div>
<div class="mobile-header">
  <h1>Mobile Header</h1>
</div>