ブラウザの幅に応じてCSSを追加しようとしています。助けが必要（jQuery）

Question

私はブラウザの幅に応じてcssファイルを追加しようとしています。

この場合、ブラウザウィンドウの幅が1200より大きい場合は、CSSファイルが追加されます。私はこれを行う方法を知っているので、それはリフレッシュで動作しますが、ブラウザ上でアクティブになっている間にブラウザのサイズが変更されている場合は、CSSファイルが変更されます。ここで

は私が現時点で持っているものだ、私はおそらくあまりにもわからない間違った方向イムに行くよ：

<link rel="stylesheet" type="text/css" id="smallS" href="<?php bloginfo('template_directory'); ?>/css/default-960.css" /> 
<script> 
    $(function(){ 
     $(window).resize(function(){ 
      var w = $(window).width(); 
      if (w > '1200') { 
       document.write('<link rel="stylesheet" type="text/css" id="largeS" href="<?php bloginfo('template_directory'); ?>/css/default.css" />'); 
      } 
      else { 
       if($('#largeS').length > 0) { 
        $('#largeS').remove(); 
       } 
      } 
     }); 
    }); 
</script> 

これは私が何を探しているものを私が前に持っていたものですが、そのありません：

if ((screen.width>=1024)) 
    { 
     document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/default.css" />'); 
    } 

Answer 1

問題は、document.writeは、ドキュメントが最初に解析されたときにのみ機能し、後では機能しないということです。 DOM操作関数を代わりに使用する必要があります。あなたはjQueryのを使用しているので、これを大幅に簡素化されます。

$(window).resize(function(){ 
    if ($(window).width() > 1200) { 
     if (!$('#largeS').length) { 
      $('head').append('<link rel="stylesheet" type="text/css" id="largeS" href="<?php bloginfo('template_directory'); ?>/css/default.css" />'); 
     } 
    } 
    else { 
     $('#largeS').remove(); 
    } 
}).trigger('resize'); // invoke the handler immediately 

注これは$('head').append()を使用し、$('#largeS')の長さに不必要な検査をしないこと。

Answer 2

CSS3を使用している場合、mediaqueriesはこれをもっとうまくやってくれます。 http://www.w3.org/TR/css3-mediaqueries/#width

例：

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="/css/default.css" /> 

Answer 3

あなたは特別CSS3をコードすることができないかもしれないが、QuirksModeは心の中で基準を維持するメディアクエリではJavaScriptを使用しての優れた記事があります。 http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

すべてのブラウザでメディアクエリを利用できるようにするjQueryプラグインもあります：project site | jquery site