我无法使我的网站横幅响应每一个设备，例如手机和不同的电脑屏幕

Question

sina121.com/hypercore/index.html这是我网站的链接。我想使横幅响应喜欢每一个设备，如手机和不同的笔记本电脑屏幕。我几乎什么都试过了。我对如何使用媒体查询来使其工作感到困惑。

CSS
.back{
    width: 100%;
    position: relative;
    background:url(images/1.png) no-repeat; min-height:500px;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration:2.5s ; /* Chrome, Safari, Opera */
    -moz-animation-name: eaxmple;
    -moz-animation-duration:2.5s;
    -moz-animation-iteration-count:infinite;
     animation-name: example;
      animation:example 2.5s;
          animation-iteration-count: infinite;
       background-size: cover;   
/*    animation-duration: 2s;*/
/*z-index: 0;*/
}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

    0%   {background:url(images/1.png) no-repeat;  
       min-height:500px;
      -webkit-background-size: cover;
-moz-background-size: auto 100%
  -o-background-size: cover;
  background-size: cover;}
    25%   {background:url(images/2.png) no-repeat;
       min-height:500px;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
    50%   {background:url(images/3.png) no-repeat;
       min-height:500px;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
    75%   {background:url(images/2.png) no-repeat;
       min-height:500px;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
    100%   {background:url(images/1.png) no-repeat;
       min-height:500px;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
}
.cloud {
  max-width: 100%;
   height: auto;
  -webkit-animation: clouds 0.01s infinite ;
  -moz-animation: clouds 0.01s infinite ;
  -ms-animation: clouds 0.01s infinite ;
  -o-animation: clouds 0.01s infinite ;
  animation: clouds 0.01s infinite ;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: absolute;
  margin: 5px 0 0 0;
  width: 54px;
  height: 10px;
  background: #f7e7eb;
  z-index: -1;
}
.cloud.tiny {
  -moz-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}
.cloud.small {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.cloud.normal {
  -moz-transform: scale(2, 2);
  -ms-transform: scale(2, 2)
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}
.cloud.large {
  -moz-transform: scale(4, 4);
  -ms-transform: scale(4, 4);
  -webkit-transform: scale(4, 4);
  transform: scale(4, 4);
}
.cloud div {
  -moz-box-shadow: inset -2px -3px 0 0 #f7e7eb;
  -webkit-box-shadow: inset -2px -3px 0 0 #f7e7eb;
  box-shadow: inset -2px -3px 0 0 #f7e7eb;
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: -3px;
  bottom: 0;
  background: #fafbf0;
  z-index: 10;
}
.cloud div:first-child + div {
  -moz-transform: scale(1.6, 1.6);
  -ms-transform: scale(1.6, 1.6);
  -webkit-transform: scale(1.6, 1.6);
  transform: scale(1.6, 1.6);
  margin: 0 0 4px 13px;
  z-index: 9;
}
.cloud div:first-child + div + div {
  -moz-transform: scale(2.4, 2.4);
  -ms-transform: scale(2.4, 2.4);
  -webkit-transform: scale(2.4, 2.4);
  transform: scale(2.4, 2.4);
  margin: 0 0 9px 32px;
  z-index: 8;
}
.cloud div:first-child + div + div + div {
  -moz-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
  margin: 0 0 2px 50px;
  z-index: 7;
}
@-webkit-keyframes clouds {
  0% {
    top: 0px;
  }
 100% {
    top:  500px ;
  }
     0% {opacity:1;}
     50%{opacity: 1;}
   75% {opacity:0.2;}
   100% {opacity:0;}
}

@-moz-keyframes clouds {
  0% {
     top: 0px;
  }
  100% {
    top: 500px;
  }
     0% {opacity:1;}
     50%{opacity: 1;}
   75% {opacity:0.5;}
   100% {opacity:0;}
}
@-ms-keyframes clouds {
  0% {
    top: 0px;
  }
  100% {
    top:500px;
  }
        0% {opacity:1;}
        50%{opacity: 1;}
   75% {opacity:0.5;}
   100% {opacity:0;}
}
@keyframes clouds {
  0% {
    top:0px;
  }
  100% {
    top: 500px;
  }
     0% {opacity:1;}
     50%{opacity: 1;}
   75% {opacity:0.5;}
   100% {opacity:0;}
}
.cloud-1 {
  -webkit-animation-duration: 20s;
  -moz-animation-duration: 20s;
  -ms-animation-duration: 20s;
  -o-animation-duration: 20s;
  animation-duration: 20s;
  margin-left: 20%;
}

.cloud-2 {
  -webkit-animation-duration: 100s;
  -moz-animation-duration: 100s;
  -ms-animation-duration: 100s;
  -o-animation-duration: 100s;
  animation-duration: 100s;
  margin-left: 90%;
}

.cloud-3 {
  -webkit-animation-duration: 75s;
  -moz-animation-duration: 75s;
  -ms-animation-duration: 75s;
  -o-animation-duration: 75s;
  animation-duration: 75s;
  margin-left: 50%;
}

.cloud-4 {
  -webkit-animation-duration: 180s;
  -moz-animation-duration: 180s;
  -ms-animation-duration: 180s;
  -o-animation-duration: 180s;
  animation-duration: 180s;
  margin-left: 43%;
}

.cloud-5 {
  -webkit-animation-duration: 25s;
  -moz-animation-duration: 25s;
  -ms-animation-duration: 25s;
  -o-animation-duration: 25s;
  animation-duration: 25s;
  margin-left: 83%;
}

.cloud-6 {
  -webkit-animation-duration: 80s;
  -moz-animation-duration: 80s;
  -ms-animation-duration: 80s;
  -o-animation-duration: 80s;
  animation-duration: 80s;
  margin-left: 73%;
}

.cloud-7 {
  -webkit-animation-duration: 109s;
  -moz-animation-duration: 109s;
  -ms-animation-duration: 109s;
  -o-animation-duration: 109s;
  animation-duration: 109s;
  margin-left: 69%;
}

.cloud-8 {
  -webkit-animation-duration: 150s;
  -moz-animation-duration: 150s;
  -ms-animation-duration: 150s;
  -o-animation-duration: 150s;
  animation-duration: 150s;
  margin-left: 80%;
}

.cloud-9 {
  -webkit-animation-duration: 101s;
  -moz-animation-duration: 101s;
  -ms-animation-duration: 101s;
  -o-animation-duration: 101s;
  animation-duration: 101s;
  margin-left: 10%;
}

.cloud-10 {
  -webkit-animation-duration: 126s;
  -moz-animation-duration: 126s;
  -ms-animation-duration: 126s;
  -o-animation-duration: 126s;
  animation-duration: 126s;
  margin-left: 14%;
}

.cloud-11 {
  -webkit-animation-duration: 96s;
  -moz-animation-duration: 96s;
  -ms-animation-duration: 96s;
  -o-animation-duration: 96s;
  animation-duration: 96s;
  margin-left: 73%;
}

.cloud-12 {
  -webkit-animation-duration: 150s;
  -moz-animation-duration: 150s;
  -ms-animation-duration: 150s;
  -o-animation-duration: 150s;
  animation-duration: 150s;
  margin-left: 51%;
}

Html
<div class="back">
        <div></div><div></div><div></div><div></div>
  </div>
  <div>
  <div class="cloud large cloud-1">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud normal cloud-2">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-3">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud tiny cloud-4">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud large cloud-5">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud normal cloud-6">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-7">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud tiny cloud-8">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-9">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud normal cloud-10">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud tiny cloud-11">
  <div></div><div></div><div></div><div></div>
</div>
<div class="cloud small cloud-12">
  <div></div><div></div><div></div><div></div>
</div>
</div>

Answer 1

尝试在外部添加一个新的div。例如，对于position:relative; overflow:hidden; width:100%" .hope属性，这会有所帮助

<div style="position:relative; overflow:hidden; width:100%">

    <div class="back">
            <div></div><div></div><div></div><div></div>
      </div>
      <div>
      <div class="cloud large cloud-1">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud normal cloud-2">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud small cloud-3">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud tiny cloud-4">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud large cloud-5">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud normal cloud-6">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud small cloud-7">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud tiny cloud-8">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud small cloud-9">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud normal cloud-10">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud tiny cloud-11">
      <div></div><div></div><div></div><div></div>
    </div>
    <div class="cloud small cloud-12">
      <div></div><div></div><div></div><div></div>
    </div>
    </div>
</div>

Answer 2

你的“火箭背景动画”，忽略了background-size:属性。这可能是因为你正在对background:进行动画处理(我不是100%确定，只是猜测。)在下面的例子中，我用动画代替了background-image，它似乎起作用了。

.back {
    ...
    background-image:url(/images/1.png);
    background-repeat: no-repeat;
    background-size: 100%;             /* always 100% view-port width */
    background-position:bottom right;
    ...
}

    @keyframes example {
        0%      {   background-image:url(/images/1.png);    }
        25%     {   background-image:url(/images/2.png);    }
        ...
    }

See Demo。希望这能有所帮助。