当屏幕调整到较小屏幕时，如何自动调整按钮大小？

Question

＆＃13;

＆＃13;

instance

＆＃13;

   .beaker {
        max-width:100%;
        height: auto;
        width: auto;

    } 

＆＃13;

＆＃13;

＆＃13;

有什么方法我可以让屏幕变得更小时按钮自动调整大小与我在屏幕调整大小之前放入的完全相同的位置。我已经尝试将宽度设置为100％，但它仍然无法正常工作。我认为它是因为引导网格列，这就是为什么按钮根本没有调整大小的原因。请帮助。

Answer 1

使用media queries。您可以在屏幕变小时调整按钮的大小。这是一种方式。

＆＃13;

＆＃13;

@media (max-width: 768px) {
  .btn {
    padding: 2px 4px;
    font-size: 80%;
    line-height: 1;
    border-radius: 3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn {
    padding: 4px 9px;
    font-size: 90%;
    line-height: 1.2;
  }
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-xs-1">

  <img id="img" width="60px" src="images/a1.png" class="img-rounded" />


</div>
<div class="col-xs-2">
  <br/>
  <br/>


  <button id="upper" type="button" class="btn btn-primary beaker">IP > Ksp</button>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <button id="middle" type="button" class="btn btn-primary beaker">IP = Ksp</button>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>


  <button id="reset" type="button" class="btn btn-primary beaker">IP < Ksp</button>

</div>

＆＃13;

＆＃13;

＆＃13;

输出已调整大小

Answer 2

为什么不尝试使用媒体？您只需要设置宽度和高度。然后，当您调整屏幕大小时。按钮的大小也会改变

Answer 3

我认为使用Bootstrap会很好。 当你使用bootstrap时，很容易管理Button的大小。

你可以使用md，sm，xs，lg作为按钮类。