@media 媒体查询和 ASP.NET MVC 剃刀语法冲突
我有一个使用 Razor 视图引擎在 ASP.NET MVC 中运行的大型站点。
我有一个基本样式表，其中包含整个站点的所有通用样式。但是，有时我在页面的 <head> 中有页面特定的样式 - 通常这是一两行。
我不是特别喜欢将 CSS 放在 <head> 中，因为它不是严格分离关注点，但是对于一两行，这确实是特定于该页面的，我宁愿不必附加另一个文件并增加带宽。
我有一个实例，虽然我想将特定于页面的媒体查询放入 <head>，但由于媒体查询使用 @ 符号和括号 {}，它与剃刀语法发生冲突：
@section cphPageHead{
<style>
/* PAGE SPECIFIC CSS */
...
@media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
{
... }
}
</style>
}
有没有办法解决这个问题？
css styles 应该在 CSS 文件中，特别是对于“大型网站”页面上的线性 css 不是最佳做法。 PS：我的看法
使用双 @@ 符号。这将转义@符号并在客户端正确呈现@media
还要记得在双@@之后添加一个空格：
@@ media only screen and (max-width : 960px)
没有空间的@@media不适合我。
style 元素的 Daut's answer 确实有效！
我意识到这是一个老问题，但这是唯一对我有用的解决方案：
@section cphPageHead{
<style type="text/css" media="screen and (max-width:959px)">
</style>
<style type="text/css" media="screen and (min-width:960px)">
</style>
}
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅相似问题
- 在 ASP.NET MVC Razor 视图中用 <br /> 替换换行符
- ASP.NET MVC 3 Razor - 将类添加到 EditorFor
- 如何在 ASP.NET MVC 3 razor ViewStart 文件中指定不同的布局？
- 文件上传 ASP.NET MVC 3.0
- 将 Ajax.BeginForm 与 ASP.NET MVC 3 Razor 一起使用
- 媒体查询：如何定位台式机、平板电脑和移动设备？
- 使用 Razor 视图引擎将内容从局部视图 ASP.NET MVC 3 注入特定部分
- ASP.NET Razor 中的 HTML.ActionLink 与 Url.Action
- 媒体查询中的“屏幕”和“仅屏幕”有什么区别？
style元素！请参阅下面的答案，并可能将其添加到此。