Question

我试图让我的网站键盘在移动设备上可扩展。我之前使用的是@media，但由于我对实际测试的内容有限，我想确保能覆盖其中的大部分内容。我目前正在使用Bootstrap来获取我的图像，但我无法在教程中找到真正用于一组按钮的内容。

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

#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;
    width: 70pt;
}

Answer 1

我相信您所寻找的内容被称为“按钮组”here is the link to bootstrap's page。

Answer 2

如果它是键盘键的响应宽度，您可以尝试使用vw属性以及min-width和max-width

小提琴：https://jsfiddle.net/xj3uqh7h/

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

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

2 个答案: