Question

我正在尝试使用老虎机创建页面，并且在尝试使其具有响应性时遇到一些问题。在某些时候，当连接到较小的设备时，它会被切断。另外，我认为我做的有点复杂，希望大家理解我的代码混乱。非常感谢

HTML

<body>
 <div class="background">
  <div class="all-parts">
   <div class="slot-machine">
    <div class="slot-machine-wrapper">
      <div class="first-slot">
        <img src="slot-strip.png">
      </div>
      <div class="second-slot">
        <img src="slot-strip.png">
      </div>
      <div class="third-slot">
        <img src="slot-strip.png">
      </div>
     </div>
    </div>

   <div class="free-spins">
  </div>
 </div>

   <div class="click-to-spin">
  <p>Click to spin!</p>
 </div>

</div>

</body>

CSS

* {
margin:0;
padding:0;
border:0 none;
box-sizing: border-box;
}

html,body {
width:100%;
height:100%;
}

.background {
 background:url("bg.jpg");
 height:500px;
 padding:270px 0;
 height: 100%;
 background-repeat: no-repeat;
 width:100%;
 }

.all-parts {
 margin:auto;
 height:300px;
 width:50%;
 position: relative;
}

.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:500px;
width:100%;
position: absolute;
}

.free-spins {
 background:url("freespins-banner.png");
 background-repeat: no-repeat;
 height:100px;
 position: absolute;
 top:150px;
 left:370px;
 z-index: 3;
 width:60%;
  }

.click-to-spin {
 background:url("diagonal-strip.png");
 background-repeat: no-repeat;
 position: absolute;
 z-index: 3;
 top:450px;
 width:100%;
 height:130px;
 background-size:cover;
  }

.click-to-spin p {
 text-align: center;
 margin-top:70px;
 font-size:40px;
 color:rgb(247,241,198);
}

.first-slot img {
margin-top:-1180px;
margin-left:215px;
width:120px;
}

.second-slot img{
margin-top:-1180px;
margin-left:-10px;
width:120px;
}


.third-slot img{
margin-top:-1180px;
margin-left:-10px;
width:120px;
}

first-slot, .second-slot, .third-slot {
float:left;
}

.slot-machine-wrapper {
overflow: hidden;
height:150px;
margin-top:60px;
}

@media only screen and (max-width: 1400px) {
 body {
  background-color: red;
  }

.all-parts {
  width:100%;
  display: table;
  }

 .slot-machine {
   width:100%;
  }
  }

非常感谢......

Answer 1

例如，我建议您使用css @media查询来断点

   // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:200px;
width:70%;
position: absolute;

} }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:250px;
width:80%;
position: absolute;

} }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

只需在上面的每个@media查询中放置可能会在整个设备上更改的css值，请记住也要在您的meta标签中添加

 <meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

您可以用屏幕截图详细说明吗要么您可以使用引导程序使其响应。 Bootstrap允许使用网格系统，该系统可以使庞大的数据响应：）

尝试使页面响应时Div中断

2 个答案: