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>

Answer 2

使用这些媒体查询并按照https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@媒体屏幕和（设备宽度：320像素）和（设备高度：640px）和（-webkit-device-pixel-ratio：3）{

}

为什么我的媒体查询没有更改任何内容？

2 个答案: