0

我正在开发一个 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 不会再次加载，你们有什么想法吗？

谢谢

4

4 回答 4

4

使用 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" />
于 2012-05-08T20:09:39.183 回答
1

我相信你需要使用 Url.Content()。IE

@Url.Content("~/Content/SiteWide.css");

如果您使用从索引页面导航时，路径可能不正确

./Content/SiteWide.css

我通常发现 Url.Content() 在路径到项目中的文件时是正确的做法

于 2012-05-08T20:11:03.400 回答
0

我建议实施响应式网页设计

http://www.sitepoint.com/responsive-web-design/#fbid=UhFHwQrRwnn

您可以使用所谓的“媒体查询”来实时动态地应用不同的 css 文件或属性作为屏幕大小的变化。很酷！

于 2012-05-08T20:08:30.930 回答
0

专业提示：不要使用静态文件位置。使用 Url.Content。

您的代码如下所示：

var css = '@Url.Content("~/Content/SiteWide.css")';

试试这个，看看它是否有效。根据经验，我的静态位置有时无法按预期工作，而 Url.Content 为我解决了问题。

于 2012-05-08T20:13:01.600 回答