Html 在容器中缩放多个按钮的最佳方法

我正在努力使我的网站键盘在移动设备上可伸缩。我以前使用过@media，但由于我对实际测试内容的限制，我想确保我能覆盖大部分内容。我目前正在为我的图像使用引导，但我在教程中找不到真正用于一组按钮的内容

<div id="keyboard">
<div class="keyboardRow">
    <button id="keyboardKey" class="keyboardKey">A</button>
    <button id="keyboardKey" class="keyboardKey">E</button>
    <button id="keyboardKey" class="keyboardKey">I</button>
    <button id="keyboardKey" class="keyboardKey">O</button>
    <button id="keyboardKey" class="keyboardKey">U</button>
    <button id="keyboardKey" class="keyboardKey">P</button>
    <button id="keyboardKey" class="keyboardKey">H</button>
</div>
<div class="keyboardRow">
    <button id="keyboardKey" class="keyboardKey">G</button>
    <button id="keyboardKey" class="keyboardKey">R</button>
    <button id="keyboardKey" class="keyboardKey">T</button>
    <button id="keyboardKey" class="keyboardKey">K</button>
    <button id="keyboardKey" class="keyboardKey">M</button>
    <button id="keyboardKey" class="keyboardKey">N</button>
    <button id="keyboardKey" class="keyboardKey">W</button>
</div>

<div class="keyboardRow">
    <button id="buttonHint">Hint</button>
    <button id="buttonQuit">Quit</button>
</div>

---

我相信您正在寻找的是键盘上的“按钮组”。

如果是键盘键的响应宽度，您可以尝试使用

vw

属性以及

min width

和

max width

小提琴：

CSS

#keyboard {
    font-size: 16pt;
    width: 50%;
    margin: 0 auto;
}
.keyboardRow {
    position: relative;
    text-align: center;
}
#keyboardKey {
    display:inline-block;
    border:1px solid black;
    margin-left: 5pt;
    font-size: 16pt;
    max-width:50px;
    min-width:28px;
    width: 7vw;
}

---

所以您需要一种方法来相应地缩放各个键的宽度？您的标记无效。您缺少一个结束div标记。请更新问题以准确反映您的代码。@Jesse很好地使用所有键，可以单独使用，也可以使用键盘容器。当我使用媒体时，我的字体大小有问题，我不能准确地测试多台设备。chrome mobile view并非100%准确。id必须是唯一的。单字母键盘键将调整为相同的宽度和高度，提示和退出按钮也有自己的独立id@j08691

#keyboard {
    font-size: 16pt;
    width: 50%;
    margin: 0 auto;
}
.keyboardRow {
    position: relative;
    text-align: center;
}
#keyboardKey {
    display:inline-block;
    border:1px solid black;
    margin-left: 5pt;
    font-size: 16pt;
    max-width:50px;
    min-width:28px;
    width: 7vw;
}