2017-08-23 5 views
0

私はいくつかのボタン、およびコンテンツへonclik巻物を持っており、このコードは良い作品:jQueryでメディアクエリを定義する方法は?

jQuery(document).ready(function(){ 

    jQuery("button#defaultOpen").click(function() { 
     jQuery('html, body').animate({ 
      scrollTop: jQuery("#defaultOpen").offset().top+267 
     }, 1000); 
    }); 

    jQuery("button#spezialkurs").click(function() { 
     jQuery('html, body').animate({ 
      scrollTop: jQuery("#spezialkurs").offset().top+267 
     }, 1000); 
    }); 

    jQuery("button#opengym").click(function() { 
     jQuery('html, body').animate({ 
      scrollTop: jQuery("#opengym").offset().top+125 
     }, 1000); 
    }); 

    jQuery("button#challenge").click(function() { 
     jQuery('html, body').animate({ 
      scrollTop:jQuery("#challenge").offset().top+125 
     }, 1000); 
    }); 

    jQuery("button#vielseitige").click(function() { 
     jQuery('html, body').animate({ 
      scrollTop: jQuery("#vielseitige").offset().top-10 
     }, 1000); 
    }); 

}); 

問題は、私はこのコードが唯一の768の上に実行することをメディアクエリを追加したいということです!ここで間違っていますか?あなたはjQueryを使ってメディアクエリを使用することはできませんが、あなただけの特定の解像度のためのあなたの機能を実行する場合のことができます。

if (screen.width > 768) {your code goes here} 
+1

メディアクエリをCSSに直接入れない理由はありますか?また、コードをDRYする方法を実際に調べる必要があります。これらのハンドラをすべて1つにすることができます。 –

+0

メディアクエリのメリットの1つは、条件付きのCSSルール**を持たないことです。 – Taplar

+0

@RoryMcCrossanはい、あなたがコードを乾かすことができれば素晴らしいかもしれません!さて、このコードをCSSに追加するにはどうすればいいですか? – GMedija

答えて

-1

をありがとうこのコードを使用してください:

if(jQuery(window).width() > 768) { 
    your code 
} 
-1

は、あなたがこのようなものを使用することができ、

関連する問題