0

ボディにビューをレンダリングするマスターページを使用して、MVC3 アプリケーションに取り組んでいます。現在、2 つの 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>

どういうわけか、2 番目のページ (すべて同じマスターページを使用) に移動したときに CSS が再度読み込まれません。何かアイデアはありますか?

ありがとう

4

4 に答える 4

4

JavaScript の代わりに CSS メディア クエリを使用します。

<!-- 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" />

理想的には、1 つの状態に対して 1 つの 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() を使用する必要があると思います。いえ

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

を使用すると、インデックス ページから移動するときにパスが正しくない可能性があります。

./Content/SiteWide.css

私は通常、プロジェクト内のファイルへのパスを指定するときに Url.Content() が正しいことを発見しました

于 2012-05-08T20:11:03.400 に答える
0

レスポンシブ Web デザインの実装をお勧めします

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 に答える