使CSS响应的问题

我试图使下面的CSS响应，特别是使它在手机屏幕上工作

我想这是因为书的侧面的尺寸是用px表示的（我没有包括这一点CSS），但我认为它可以用vh/vw或div中的%来解决

请参阅下面的代码：

@-webkit-keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.containerp {
  /*width: 100vw;*/
  height: 100vh;
  overflow: hidden;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  /*display: flex;*/
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /*justify-content: center;*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.containerp > div {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.boockup {
  -webkit-transform: rotateX(29deg) rotateY(-88deg) rotateZ(0deg);
  transform: rotateX(29deg) rotateY(-88deg) rotateZ(0deg);
}
.book-container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: 30s rotatingAnimationY linear infinite;
  animation: 30s rotatingAnimationY linear infinite;
}
.book-container > div {
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

---

非常感谢您的帮助。谢谢大家!

要使其具有响应性，您需要使用：

百分比 vw（视口宽度） vh。（视口高度） 以及@media（）（媒体查询）

我发现的一个技巧是，如果你想保持事物的比例，那么就在宽度和高度上都使用vw。
例如： 你有一个600像素宽，150像素高的图像

.image{
  height: 150px;
  width: 600px;
}

//上面显示的图像为600 x 150 px

@media( max-width: 600px){
  .image{
    width:100vw;
    height: 25vw;
   }
}

//当屏幕尺寸小于600px时，图像将变为100vw x 25vw，保持4:1的相同比例