html - 如何修复媒体查询时的 "Expected RBRACE"错误？

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 class-line没有任何效果。

Answer 1

你不能像这样在 vanilla 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 等)然后仅在您需要时指定应该更改的内容以及从什么 Angular (如我提供的代码)。

如果您不清楚，请告诉我!