如何在屏幕調整到較小的屏幕時自動調整按鈕大小？

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

 
    }

<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>

有什麼辦法我也可以使按鈕自動調整屏幕時，得到完全相同的斑點小，因爲我把屏幕大小調整前。我試圖把寬度設置爲100％，但它仍然不起作用。我認爲它的原因是引導網格列，這就是爲什麼按鈕不會調整大小。請幫忙。

來源

2017-09-22 Nur Shaherra

利用'@ media'查詢 –

你爲什麼不嘗試使用媒體？你只需要設置寬度和高度。然後，當你調整你的屏幕。按鈕的大小也會改變

來源

2017-09-22 08:21:44

使用media queries。您可以在屏幕變小時調整按鈕大小。這是一種方法。

@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; 
 
    } 
 
}

<!-- 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>

輸出調整大小

來源

2017-09-22 08:22:37 Hash

該按鈕的確會根據屏幕大小調整而改變，但其中的文字並不遵循按鈕大小..所以當按鈕變小時它就不在按鈕中了 –

@NurShaherra i checked在鉻上它工作正常。你也可以嘗試像'0.90em'字體。 – Hash

我認爲這將是很好用引導。當你使用bootstrap時，很容易管理Button的大小。

您可以使用md，sm，xs，lg作爲按鈕類。

來源

2017-09-22 08:23:30

如何在屏幕調整到較小的屏幕時自動調整按鈕大小？

回答

相關問題