テキストラップとウィンドウの幅に応じてCSSクラスを変更する（JqueryまたはJavaScript）

Question

私はいくつかのテキスト列を使ってレスポンシブデザインをしています。列には見出しがあり、見出しの左側に浮かべるのは、見出しのテキストの中央に垂直なイメージアイコンです。この問題は、ウィンドウの幅を狭めると発生します。 1つの見出し行が折り返されると、それらはもはやアイコンに垂直に整列されません。

基本的には、見出しのクラスを2行に折り返すときに変更するように指示するスクリプトを作成しようとしています。そのため、縦方向の位置を変更することができます。

私は、私はそれを書くするかどうかはわかりませんが、これは本質的であるようなスクリプトには本当に新しいです：

if window width > 768 and if lines of text in #services h2 = 1 

#services h2 { 
top:9px; 
} 

else 

if window width > 768 and if lines of text in #services h2 > 1 

#services h2 { 
top:1px; 
} 

は、誰かが私はこれを適切にフォーマットする助けてもらえますか？私はすでにいくつかの他のもののためにjQueryを使用していますので、それを行うことが可能なら、それは素晴らしいでしょう。

ありがとうございます！

EDIT：この最も重要な部分は、行が1行から2にラップする際の重要な一部であり、クラスのプロパティの変更です：

if lines of text in #services h2 = 1 

#services h2 { 
top:9px; 
} 

else 

if lines of text in #services h2 > 1 

#services h2 { 
top:1px; 
} 

Answer 1

私はわかりませんよAND 'の左側がANDの左側にある場合は、

-EDIT-これがあなたの望むものかどうかを見てみましょう。

$(window).resize(function(){ 
    var h =$('#services h2').css('line-height'); 
    var size = $(window).width(); 
    if (size > 768){ 
      if($('#services h2').height() == h){ 
       $('#services h2').css('top','1px') 
      } 
    }else{ 
      if($('#services h2').height() > 2*h){ 
       $('#services h2').css('top','9px') 
      } 
    } 

}); 

Answer 2

JavaScript（jQueryを含む）は必要ありません。純粋なCSS：http://www.css3.info/preview/media-queries/を使用してください。長い説明がhttp://css-tricks.com/css-media-queries/

Answer 3

で発見することができます

あなただけの背景画像の垂直方向の位置を50％に設定されていませんでしたか？比較的小さな美容上の変化にjsを追加するのではなく、