我可以让我的jQuery响应所有设备吗？

Question

我处理的移动友好的网站，并使用我申请使用jQuery多个动画。我写了jQuery的台式机以及笔记本也如下：

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 
    }); 

现在，我有各种移动设备所以在每一个设备，我无法设置margin-leftmargin-bottom按照这里给出。例如，这里给出margin-left: 180px但如果我的手机有500像素，800像素宽度不同，会发生什么？那么，我怎么能写jQuery以上的移动友好版本。

Answer 1

更好的你去媒体查询为跨浏览器和移动设备。 你可以在W3schools的mediaQueries上了解更多：http://www.w3schools.com/csSref/css3_pr_mediaquery.asp和https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries