logo标签列表

@media 媒体查询和 ASP.NET MVC Razor 语法冲突

cssasp.net-mvc-3razormedia-queries
259

我有一个大型网站，它在ASP.NET MVC中运行，使用Razor视图引擎。

我有一个基本样式表，其中包含整个站点的通用样式。但是，偶尔会有页面特定的样式，位于页面的 <head> 中 - 通常只有一两行。

我不喜欢将CSS放置在 <head> 中，因为这并不是严格意义上的关注点分离，但对于仅针对该页面的一两行代码，我更愿意不必附加另一个文件并增加带宽负担。

但我遇到了这样的情况：我想将一个页面特定的媒体查询放入 <head> 中，但由于媒体查询使用 @ 符号和括号 {}，它与 Razor 语法发生冲突：

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}

有没有方法可以规避这个问题？

3
我仍然认为，CSS样式应该放在CSS文件中，特别是对于一个“大型网站”，页面上的线性CSS不是最佳实践。 PS：这是我的观点 - AlexC
1
我同意@AlexC的观点，但对于那些对有效用例感到好奇的人来说，关键CSS内联加载比外部加载更快。 对于那些依赖于超快速首次有意义的绘图的站点来说，这是一个非常方便的技巧。 - John Pavek
8
另一个用途是渲染电子邮件。 - Jan Zahradník
对于使用代码分析工具（如Sonar）的人来说，双 @ 符号可能会被标记为重大错误。如果你有机会更改或禁用该规则，那就没问题了；否则，你必须找到另一种方法来避免 @ 符号。 - ümit Altuntaş
当使用带有网格的@media时，您可能希望样式表在页面中，因为每个页面布局可能不同，您只想控制该特定页面，并将css打包到文件中是过度工程化的，没有意义。在这种情况下，保持代码在一起。因此，在任何仅适用于单个页面的css的情况下，最好将其放在该页面中。否则，始终放在单独的css文件中。 - M H
3个回答
607

使用双重 @@ 符号。 这将转义 @ 符号，使 @media 在客户端上正确呈现。

使用双@@对我没有起作用。我不得不使用一个@和两个不同的style元素！请查看我的答案，并可能将其添加到此处。 - Daut
谢谢你。我真的希望人们不要在没有被问及的情况下发表自己的意见，而是按照问题所问来回答。我相信你这样做有充分的理由，他们应该尊重这一点。 - user789221
40

同时记得在双@@后面添加一个空格：

 @@ media only screen and (max-width : 960px)

@@media没有空格对我不起作用。

2
在使用压缩的CSS时，我遇到了类似的问题；我认为@@被文本包围，因此Razor难以解释它。我选择在@@之前添加空格。感谢您的提示。 - Anthony
2
即使加了空格，这对我仍然不起作用。但是 Daut 的答案 中的两个不同 style 元素确实有效！ - CPHPython
没有空格工作 - Dhruvil21_04
@Dhruvil21_04 可能在更新的版本中已经解决了这个问题。 - A-Sharabiani
18

我知道这是一个旧问题，但这是唯一对我有用的解决方案：

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}
正如David所说：使用双@@符号。这将转义@符号并在客户端上正确呈现@media。 - Ahmed Suror
这也是唯一对我有效的方法。我只需要一个单独的<style>部分，但在<style>标签本身中声明媒体属性而不是在CSS内部声明的重点。双@符号不起作用。 - clamum
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接