如何让我的箱子能够响应任何屏幕尺寸

Question

如果您查看我的PEN，我正尝试创建一个响应式框。

目前，如果我缩小页面，项目将开始隐藏。 有没有办法让这个绿色盒子适应任何手机屏幕尺寸？

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>

希望这样做的罚款。首先，我将所有的行和列都包含在容器中，这样即使对于特小尺寸的屏幕也可以进行调整。其次，您将不得不删除卡片细节类的宽度和高度。