如何解決媒體查詢中的“預期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類行沒有任何作用。

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等），然后僅在需要時指定應該更改的內容和觀點（例如我擁有的代碼）提供）。

讓我知道您是否不清楚！