在.cshtml檔案中的<style>標籤中的@media規則出現錯誤

Question

為什麼要把下面的程式碼放在 "style" 標籤中

<style type="text/css">
    .on-the-fly-behavior {
    background-image: url('particular_ad.png');
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>

在 .cshtml 檔案中的 "style" 標籤中顯示時會拋出錯誤：

CS0103: The name 'media' does not exist in the current context

Answer 1

嘗試：

<style type="text/css">
    .on-the-fly-behavior {
    background-image: url('particular_ad.png'); 
}
@media screen and (max-width: 300px) { /* 添加screen and */
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>

Answer 2

在.cshtml檔案中，你不能直接使用它，因為它會被視為一個類別或物件。當你需要在html檔案中加入以@開頭的內容時，你需要額外增加一個@。嘗試使用以下程式碼：

<style type="text/css">
    .on-the-fly-behavior {
        background-image: url('particular_ad.png'); 
    }
    @@media (max-width: 300px) {
        .on-the-fly-behavior {
            background-image: url('particular_ad_small.png');
        }
    }
</style>