Question

我正在尝试使我们的网页设备响应@media。但是，我收到错误“第44行第3行的预期RBRACE”。和“意外的标记'}'在第48行第1行”，即使代码对我来说看起来不错。有人对此有解决方案吗？

我已经尝试根据错误修复代码，但这完全弄乱了代码的@ media-portion。我还通过代码检查器运行了代码，错误仍然存在。

.content {
  font-family: 'Lora', sans-serif;
  font-size: 48px;
  @media (min-width: 480px) {
    width: 70%;
    margin: 0 auto;
  }
 }

我的目标是将上面的代码放在CSS中，然后使用

<div class="content">text goes here</div>

使我们的文字看起来更好。但是，由于css中的错误，div类行没有任何作用。

Answer 1

您不能像这样在香草CSS中嵌套@media查询。

您应该重新编写CSS，使其看起来像这样：

/* outside the media query */

.content {
    font-family: 'Lora', sans-serif;
    font-size: 48px;
}


@media only screen and (min-width: 480px) {
    .content{
        width: 70%;
        margin: 0 auto;
    }
}

仅在必要时替换规则。这将减少您必须编写的代码量。另外，看看https://sass-lang.com/，它将使编写CSS变得容易得多！

一般来说，我倾向于将所有@media规则放在样式表的底部或另一个样式表中。这个想法是，您可以在页面顶部指定通用规则（例如font-size，font-family，width等），然后仅在需要时指定应更改的内容并在什么观点（例如我提供的代码）。

让我知道您是否不清楚！

如何解决媒体查询中的“预期的RBRACE”错误？

1 个答案: