我无法使用最大宽度媒体查询设置页面样式

Question

我正在练习编码。尝试制作 grubhub 网页。最大宽度媒体查询遇到问题。

下面是我的代码

  @media (max-width: 800px) {
    div.displayFood h2 {
      font-size: 3rem;
    }
    .order {
      display: flex;
      flex-direction: column-reverse;
    }
  }

我知道这是很多代码。感谢任何帮助。

Answer 1

你错过了.hide类的右括号

这就是为什么在这门课之后没有任何效果的原因

.hide {
  display: none;
} /*<---- this is missing*/
  
@media (min-width: 800px) {
  .hero {
    flex-wrap: nowrap;
  }
}

Answer 2

设备宽度 @media only screen and (max-width: 800px) {...}