时间戳

首页 > 解决方案 > 如何修复媒体查询中的“预期 RBRACE”错误？

html - 如何修复媒体查询中的“预期 RBRACE”错误？

问题描述

我正在尝试使用@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 类行没有任何作用。

标签： htmlcss

解决方案

您不能@media像这样在 vanilla css 中嵌套查询。

你应该重写你的 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等），然后仅在需要时指定应该更改的内容以及在什么角度（如我提供的代码）。

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

推荐阅读