Question

不知道为什么这不起作用，这可能是一个快速修复，但是我无法让我的CSS Media查询正确识别属性和值。我想我可能会弄乱语法。有什么想法吗？这是我正在使用的代码位

CSS

nav ul {
  width: 35vw;
  position: relative;
  left: 300px;
  top: 30px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

  @media (max-width: 1033px) {
    left: 150px;
  }
}

当我键入它时，它似乎认为left属性是一个值。如果在1033px后面加上分号，它将识别为属性，但是更改浏览器大小时仍然没有任何反应？您的任何建议将不胜感激。谢谢！

Answer 1

编写方式只有在使用CSS预处理程序（如LESS或SASS）时才有效。但是在常规CSS中，您必须单独编写媒体查询，而不是在特定选择器的CSS规则内编写媒体查询。因此，您的示例必须像这样：

nav ul {
  width: 35vw;
  position: relative;
  left: 300px;
  top: 30px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 1033px) {
  nav ul {
    left: 150px;
  }
}

媒体查询语法问题

1 个答案: