Css 响应按钮缩略图的高度和宽度

我想创建css，这将为像引导“img缩略图”这样的响应按钮工作。这意味着，无论我改变屏幕大小，按钮的高度和宽度都会相应地改变

---

请帮帮我。

这里有点乱，但你在找这样的东西吗

HTML:

<div class="button-panel">
    <div class="row button-row">
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 1">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 2">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 3">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 4">  
        </div>
    </div>
    <div class="row button-row">
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 5">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 6">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 7">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 8">  
        </div>
    </div>
    <div class="row button-row">
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 9">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 10">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 11">  
        </div>
        <div class="col-xs-3 button-container">
            <input type="button" class="btn btn-primary btn-responsive" value="Button 12">  
        </div>
    </div>
</div>

.button-panel {
    height: 100vh;
}
.button-row {
    height: calc(100% / 3);
}
.button-container {
    padding: 0;
    height: 100%;
}
.btn-responsive {
    width: 100%;
    height: 100%;
}

---

您有没有研究过引导媒体查询：？？？您能告诉我们您的一次尝试吗？按钮是图像、文本还是带有图标的文本？如果它是文本，你想把文本也放大吗？我想做3行4列。在这个单元格内，每个按钮的大小都相同（矩形按钮）。根据分辨率，按钮的大小将发生变化。