Error with @media rule in <style> tag in .cshtml file

Question

Why put the following code in the "style" tag

<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>

When displayed in a "style" tag in a .cshtml file, an error is thrown:

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

Answer 1

try:

<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

In a .cshtml file, you cannot use it directly because it will be treated as a class or object. When you need to add content starting with @ in an html file, you need to add an additional @. Try using the following code:

<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>