使泡沫响应的问题

Question

我有泡泡代码，想要制作泡泡手机和iPad响应。我尝试了很多方法，但它没有用。当我在PC上调整屏幕大小而不是在我的手机上调整大小时，它可以工作。谁能检查一下？ 以下是我的代码：

<div id="bubbles">
       <div class="bubble x1"></div>
        <a href="#"><div class="bubble x2"></div></a>
       <a href="#"> <div class="bubble x3"></div></a>
        <a href="#"><div class="bubble x4"></div></a>



    <style>
    html,
    body,
    #bubbles { height: 100% }
    body { overflow: hidden }
    .bubble {
        width:400px;
        height: 400px;

        border-radius: 200px;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        position: absolute;
    }

    .x1 {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.6;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-title-bubble.png);
    }
      .x1:hover {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-text-bubble.png);
    }

    .x2 {
        right: 625px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.6;
       width:315px;
      height:315px;
        -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-elegance.png);
    }
      .x2:hover {
        right: 625px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
       width:315px;
      height:315px;
        -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-ele-text.png);
    }
    .x3 {
        right: 330px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.3;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/grey1-bubble.png);
    }
    .x4 {
        left: 935px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.3;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/grey1-bubble.png);
    }


    @-webkit-keyframes moveclouds {
        0%{
            top: -500px;
        }
       100% {
            top: 433px;
        }
    } 


    @-webkit-keyframes sideWays {
        0% {
            margin-left:0px;
        }
        100% {
            margin-left:50px;
          margin-right:50px;
        }
    }

    @-moz-keyframes moveclouds {     
        0% {
            top: -500px;
        }

        100% {
            top: 735px;
        }
    }

    @-moz-keyframes sideWays {
        0% {
            margin-left:0px;
        }
        100% {
            margin-left:50px;
          margin-right:50px;
        }
    }
    @-o-keyframes moveclouds {
        0% {
            top: -500px;
        }
        100% {
            top: 500px;
        }
    }

    @-o-keyframes sideWays {
        0% {
            margin-left:0px;
        }
        100% {
            margin-left:50px;
          margin-right:50px;
        }
    }
     @media only screen (max-width:786px) and (min-width:310px) 
    {
        .x1 {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.6;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-title-bubble.png);
    }
      .x1:hover {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-text-bubble.png);
    }

    .x2 {
        right: 425px!important;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.6;
       width:315px;
      height:315px;
        -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-elegance.png);
    }
      .x2:hover {
        right: 425px!important;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
       width:315px;
      height:315px;
        -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/images/grey-ele-text.png);
    }
    .x3 {
        right: 220px!important;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.3;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 19s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/grey1-bubble.png);
    }
    .x4 {
        left: 640px!important;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.3;
        width:315px;
      height:315px;
        -webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
        -o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
          background-image: url(/grey1-bubble.png);
    }


    @-webkit-keyframes moveclouds {
        0%{
            top: -500px;
        }
       100% {
            top: 234%!important;
        }
    } 


    @-webkit-keyframes sideWays {
        0% {
            margin-left:0px;
        }
        100% {
            margin-left:10px;
          margin-right:10px;
        }
    }
    }
      }
    </style>