Kann ich meine Jquery für alle Geräte ansprechen lassen?

Question

Ich habe es mit einer mobilen Website zu tun, und ich habe mehrere Animationen mit jquery verwendet. Ich schrieb jquery für den Desktop sowie Laptop auch als unten:

function mobani1() 
{$("#animate1").fadeIn('slow').animate({'display':'inline- 
block','margin- left':'180px','margin-bottom':'6px'},1000,function(){ 

$('.1st').animate({'opacity': '0.9'},400, 
    function(){$('.1st').animate({'opacity':'1'})})}); 
    $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-140px'},1000) 
     .fadeOut('slow');} 

    function mobani2(){ $(".2nd").fadeIn('slow').animate({'margin-left':'20px','margin-bottom':'2px'},'slow',function(){$('.1st').animate({'opacity':'0.5'},1000, 
    function(){$('.1st').animate({'opacity':'1'},'slow')})}).fadeOut(); 
    $(".2nd").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-150px'},'slow') 
    .fadeOut('slow');} 

    var interval1=[mobani1,mobani2,mobani3]; 
    var index =0; 
    $(document).ready(function(){ 
       window.setInterval(function(){ 
        interval1[index++ % interval1.length]() 
            },10800); // total time taken by animation is 10800 
    }); 

Nun, ich verschiedene mobile Geräte haben so in allen Geräten, ich nicht margin-leftmargin-bottom festlegen können, wie pro Sie hier. Zum Beispiel, hier margin-left: 180px gegeben, aber was passiert, wenn mein Handy 500px, 800px verschiedene Breite haben? Also, wie kann ich über jquery für mobile freundliche Versionen schreiben.

Answer 1

Besser Sie gehen mit Media-Abfragen für Cross-Browser und mobile Geräte. können Sie mehr über MediaQueries von W3schools lernen: http://www.w3schools.com/csSref/css3_pr_mediaquery.asp und https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries