时间戳

首页 > 解决方案 > 我的媒体查询中是否存在语法错误？

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

问题描述

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

我尝试指定我的媒体查询是针对屏幕的，但它不起作用。

如果您想查看完整代码，此项目在 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 元素一样。

标签： htmlcss

解决方案

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

推荐阅读