我怎樣才能讓我的盒子對任何屏幕尺寸做出反應

Question

如果您選中我的筆，我正在嘗試創建一個響應框。

此刻，如果我按比例縮小頁面，則這些項將開始隱藏。 有什么辦法可以讓這個綠色框適應任何移動屏幕尺寸？

HTML：

<div class="container">
  <div class="card-details">
      <div class="bo1">
        <img src="" alt="VISA ICON" class="visa">
        <input type="text" >
      </div>
      <div class="bo2">
        <p class="card-number" >CARD NUMBER</p>
        <input class="card-input" type="text" />
      </div>
      <a href="#" class="deposit-now" style="color:white" >DEPOSIT NOW</a> 
  </div>
</div>

CSS：

.container{
  max-width: 600px;
  background-color: blue;
  margin: auto;
}
.card-details{
  position: relative;
  background: green;
  border-radius: 10px;
  width: 500px;
  height: 250px;
  margin: auto;
  padding: 10px;
}
.card-details .bo1 input{
  float: right;
}
.card-details a.deposit-now{
  position: absolute;
  bottom: 0;
  right: 20px;
}

希望能對您有所幫助。

Answer 1

只需應用100％的寬度和500px的最大寬度即可：

.card-details{
  max-width: 500px;
  width: 100%;
}

https://codepen.io/anon/pen/dOXjMO

Answer 2

更改width: 500px; 到max-width: 500px; 在.card-details將調整寬度。

如果要調整高度，則可能必須將高度更改為自動，或者嘗試使用flexbox或媒體查詢

Answer 3

更改width到max-width在.card-details元素。

做

.card-details {
  max-width: 500px;
}

代替

.card-details {
  width: 500px;
}

希望這可以幫助！

Answer 4

沒有任何媒體查詢，您就可以使用它。

  .container{ width: 600px; max-width: 100%; background-color: blue; margin: auto; } .card-details{ position: relative; background: green; border-radius: 10px; width: 80%; height: 250px; margin: auto; padding: 10px; } .card-details .bo1 input{ float: right; } .card-details a.deposit-now{ position: absolute; bottom: 0; right: 20px; } 

 <div class="container"> <div class="card-details"> <div class="bo1"> <img src="" alt="VISA ICON" class="visa"> <input type="text" > </div> <div class="bo2"> <p class="card-number" >CARD NUMBER</p> <input class="card-input" type="text" /> </div> <a href="#" class="deposit-now" style="color:white" >DEPOSIT NOW</a> </div> </div> 

Answer 5

  .container{ max-width: 600px; background-color: blue; margin: auto; } .card-details{ position: relative; background: green; max-width:500px; height:250px; border-radius: 10px; margin: auto; padding: 10px; } .card-details .bo1 input{ float: right; } .card-details a.deposit-now{ position: absolute; bottom: 0; right: 20px; } 

 <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="card-details"> <div class="bo1"> <img src="" alt="VISA ICON" class="visa"> <input type="text" > </div> <div class="bo2"> <p class="card-number" >CARD NUMBER</p> <input class="card-input" type="text" /> </div> <a href="#" class="deposit-now" style="color:white" >DEPOSIT NOW</a> </div> </div> 

希望這很好。 首先，我將行和列包括在容器中，以便即使對於超小尺寸的屏幕也可以對其進行調整。 其次，您將必須刪除card-details類的寬度和高度。