默认样式覆盖媒体查询样式

Question

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

#hero .text {
  margin: 150px;
}

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

在我的浏览器中，如果我调整到1024px宽，我可以看到所有上述样式都被请求但是默认样式（边距为150px）是最终使用的。

我知道我做错了什么？

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;
}