Question

我有一个我正在部署到网站的引导程序轮播的代码。它在大型设备上运行良好，但我想添加媒体查询以针对移动设备进行优化。

但是，每当我向样式表添加媒体查询时，我都会收到运行时错误并且网站会中断。

我正在使用Umbraco，这个轮播是一个局部视图。当我添加一个空白查询，如

@media screen and (max-width:480px) {
  body {
    color: red;
  }
}

我收到运行时错误，可能有什么问题？

谢谢

Answer 1

由于您的CSS位于视图中的标记内并且您正在使用@media，因此必须通过添加额外的@来转义@。所以将代码更改为

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

当使用@时，编译器认为你正在编写Razor代码并且它只是错误，因为它无法弄清楚@media应该是什么，因为没有用其名称定义的变量。我希望这是有道理的。

Answer 2

如果你改成它，它有效吗？

@@media screen and (max-width:480px) {
  body {
    color: red;
  }
}

媒体查询中断网站

2 个答案: