Question

我正在尝试运行此媒体查询，并且我怀疑可能存在语法错误。

我尝试指定我的媒体查询是针对某个屏幕的，但没有用。

如果您想查看完整的代码，则该项目位于Codepen上。

https://codepen.io/Codemeena/pen/BEydjE?editors=0100

完成该项目的要求之一是进行媒体查询。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: green;
  position: fixed;
  top: 0;
  right: 0px;
  @media (max-width: 600px) {
    flex-direction: column;
   }
}

我希望flex-direction元素像其他的CSS元素一样是紫色的。

Answer 1

您使用的语法在SASS中受支持，但在CSS中不受支持。

媒体查询必须位于规则集的外部，而不是内部。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: green;
  position: fixed;
  top: 0;
  right: 0px;
}

@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}

Answer 2

如果您使用常规CSS，则媒体查询应位于元素之外。然后，媒体查询应该包装您要影响的元素。

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: green;
      position: fixed;
      top: 0;
      right: 0px;
    }

@media (max-width: 600px) {
   ul {
            flex-direction: column;
    }
}

我的媒体查询中是否存在语法错误？

2 个答案: