ASP.NET MVC根据屏幕大小通过JavaScript在CSS中插入CSS文件

Question

我正在使用一个MVC3应用程序,其中有一个母版页,用于呈现正文中的视图.现在我有2个css文件(不同的布局),我想根据客户端的屏幕大小选择CSS. 一切都适用于下面的代码,但是,只有索引页面,每当我转到第二页,无论它是什么,都不会渲染任何CSS. 下面的代码放在母版页的HEAD部分.

<script type="text/javascript">
      var css = './Content/SiteWide.css'     

      if ($(window).width() < 1140) {
      css = './Content/SiteNarrow.css';            
      }
      var tempcss = '<link href="TEMPCSS" rel="stylesheet" type="text/css" />';
      var cssLink = tempcss.replace("TEMPCSS", css);
      document.write(cssLink);    
</script>

所以,当你去第二页(所有使用相同的主页)时,css不会再次加载,你们有什么想法吗？

谢谢

Answer 1

使用CSS媒体查询而不是Javascript.

<!-- dropped rel attribute -->
<link media="only screen and (max-width:1139px)" href="SiteNarrow.css" />
<link media="only screen and (min-width:1140px)" href="SiteWide.css" />

理想情况下,您为一个状态创建一个CSS文件,并在满足条件时进行另一个覆盖.

<!-- dropped rel attribute -->
<link href="base.css" />
<link media="only screen and (min-width:1140px)" href="override.css" />