如何根据屏幕大小调整jquery中的动画？

Question

我的css边距动画适合全屏。但是，在其他屏幕宽度大小处，动画的元素会移动屏幕。这是我的代码：

$(document).ready(function() {
  $('.click').click(function() {
    if ($(window).width() > 768) {
      $('.port').show();
      $('.social').animate({
        left: '16.5em',
        top: '8em'
      }, 4500);
      $('.bio').animate({
        left: '17em',
        top: '4em'
      }, 4500);
      $('.web').animate({
        top: '8em',
        left: '2em'
      }, 4500);
      $('.title').animate({
        top: '0em'
      }, 5500);
      $('.resume').animate({
        top: '4em',
        left: '2em'
      }, 4500);
      $(this).fadeOut(3000, function() {
        $('.name').fadeIn();
      }).css({
        backgroundColor: rgba(59, 207, 119, .2)
      });
    }
  });

  $('.bio').click(function() {
    if ($(window).width() > 768) {
      $('.bio2').slideToggle();
    }
  });
  $('.web').click(function() {
    if ($(window).width() > 780) {
      $('.welink').slideToggle();
    }
  });
  $('.social').click(function() {
    if ($(window).width() > 768) {
      $('.social2').slideToggle(500, function() {
        $('.social2').animate({
          left: '70em'
        });
      });
    }
  });
});

动画元素的Html

<div class="container title">
    <div class="col-md-12">
        <h1 class="portfolio">Portfolio By</h1>
        <br> 
        <h1 class="click"> Click</h1>
        <h1 class="name">Eddie Weldon</h1>
        </div>
    </div>
        <div class="port social">Social</div>
    <div class="port bio">Bio</div>
     <div class="port web">Website</div>
     <div class="fancybox fancyboxy-iframe port resume" href="image/Weldons%20resume%20final.pdf" data-fancybox="gallery">Resume<div class="clickfor"> click for resume</div></div>

这是元素的css

 .port{
        display: none;
        cursor: pointer;  
        position: absolute;
        font-size: 60px;
    }

    .web{
        color: rgba(0,4,255,.8);
        font-family: 'Luckiest Guy', cursive;
    }

    .social {
        color: rgba(253,76,0,.8);
        font-family: 'Luckiest Guy', cursive;   
    }

    .clickfor{
        display: none;
    }


    .social2 {
    display: none;
    position: absolute;
    width: 50px;
    margin-left: 7em;
    margin-top: 25em;
}

    .resume {
        color: rgba(255,0,0,.8);
        font-family: 'Luckiest Guy', cursive;
    } 
    .bio{
       color: rgba(250,250,19,.8);
        font-family: 'Luckiest Guy', cursive;    
    }

    .portfolio{
        font-family: 'Alfa Slab One', cursive;
        color: black;
    }
    .click{
        color:bisque;
        background-color: black;
        font-size: 60px;
        border-radius: 25px;
        position: relative;
        cursor: pointer;
        }

    .title {
    position: absolute;
    top: 200px;
    bottom:0;
    left:0;
    right: 0;
    height: 150px;
    width: 558px;
    background-color: rgba(59,207,119,.2);
    border-radius: 25px;
    text-align: center;
        }
    .name {
    display: none;
    font-family: 'Pinyon Script', cursive;
    font-size: 70px;
    position: relative;
    margin: -20px;
    color: black;

}