css - 媒体查询样式被默认样式覆盖

Question

我正在使用 CSS 媒体查询创建响应式页面。我可以在 Chrome 的开发人员工具中看到媒体查询正在运行，但是，它们并没有覆盖我的默认样式。例如，采用这些样式:

#hero .text {
  margin: 150px;
}

@media all (max-width: 1024px) and (min-width: 1px) {
  #hero .text {
    margin: 80px;
  }
}

在我的浏览器中，如果我调整到 1024 像素宽，我可以看到上面所有的样式都被请求，但最终使用的是默认样式(边距 150 像素)。

知道我做错了什么吗？

Answer 1

改变这个

@media all (max-width: 1024px) and (min-width: 1px) {
  #hero .text {
    margin: 80px;
  }
}

到

 @media screen and (max-width: 1024px) {
      #hero .text {
        margin: 80px;
      }
    }

和

 @media screen and (min-width: 1024px) {
          #hero .text {
            margin: 80px;
          }
        }

还有下面这个，

.text { /*removed #test */
  margin: 150px;
}