时间戳

首页 > 解决方案 > 为什么我的媒体查询没有改变任何东西？

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

问题描述

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

我尝试在 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 中留下了一些东西？

提前谢谢你的帮助！

标签： cssresponsive-designmedia-queries

解决方案

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

在这里，我添加了一些 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>

推荐阅读