页面底部的按钮没有响应

Question

我试图通过使用纯CSS来使页面响应。页面底部有7个按钮，当屏幕尺寸缩小时，它们应该是响应的。

这就是我一直在尝试的：

@media(max-width:360px) {
    #options {
        width: 100%;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        font-family: Verdana, Geneva, sans-serif;
        text-align: center;
        font-size: 20px;
        display: flex;
        justify-content: space-around;
        outline: none;
        padding-top: 5px;
        overflow: visible;
    }

<div id="options">
    <div id="return" title="Return to previous">
        <button id = "btnReturn" class="btn-color"><i id="i-return" class="fas fa-long-arrow-alt-left fa-2x"></i></button>
    </div>
    <div id="save" title="Save">
        <button id = "btnSave" class="btn-color"><i id="i-save" class="fas fa-save fa-2x"></i></button>
    </div>
    <div id="list" title="View list">
        <button id = "btnList" class="btn-color"><i id="i-list" class="fas fa-align-justify fa-2x"></i></button>
    </div>
    <div id="remove" title="Remove">
        <button id = "btnRemove" class="btn-color"><i id="i-remove" class="fas fa-minus fa-2x"></i></button>
    </div>
    <div id="multiply" title="Multiply">
        <button id = "btnMultiply" class="btn-color"><i id="i-multiply" class="fas fa-plus fa-2x"></i></button>
    </div>
    <div id="shuffle" title="Shuffle">
        <button id = "btnShuffle" class="btn-color"><i id="i-shuffle" class="fas fa-random fa-2x"></i></button>
    </div>
    <div id="setup" title="SetUp">
        <button id = "btnSetup" class="btn-color"><i id="i-setup" class="fas fa-cog fa-2x"></i></button>
    </div>
</div>

但我得到的只是第三个按钮的一半可见。我应该在CSS中添加什么？

Answer 1

我建议您使用flexbox，这是一个非常好的工具，可以在不必担心媒体查询的情况下进行自适应设计（当然，它不是所有内容的答案，但它似乎相关为你的问题）。您只在媒体查询中使用它，我不认为这是一个很好的解决方案。

属性＆＃34; flex-wrap＆＃34;将按钮设置在彼此之下，具体取决于它们在屏幕上的空间。尝试使用下面的代码调整屏幕大小，您将看到！

如果您希望使用按钮创建一条线，然后在屏幕达到特定大小时直接创建一列，则可以使用flex-direction: column;添加媒体查询。

＆＃13;

＆＃13;

#options{
   display:flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}

@media(max-width: 360px){
    #options{
        flex-direction: column;
    }
}

#options button{
  width:50px;
  height:30px;
  padding:5px;
  margin:5px;
}

＆＃13;

<div id="options">
    <div id="return" title="Return to previous">
        <button id = "btnReturn" class="btn-color"><i id="i-return" class="fas fa-long-arrow-alt-left fa-2x"></i></button>
    </div>
    <div id="save" title="Save">
        <button id = "btnSave" class="btn-color"><i id="i-save" class="fas fa-save fa-2x"></i></button>
    </div>
    <div id="list" title="View list">
        <button id = "btnList" class="btn-color"><i id="i-list" class="fas fa-align-justify fa-2x"></i></button>
    </div>
    <div id="remove" title="Remove">
        <button id = "btnRemove" class="btn-color"><i id="i-remove" class="fas fa-minus fa-2x"></i></button>
    </div>
    <div id="multiply" title="Multiply">
        <button id = "btnMultiply" class="btn-color"><i id="i-multiply" class="fas fa-plus fa-2x"></i></button>
    </div>
    <div id="shuffle" title="Shuffle">
        <button id = "btnShuffle" class="btn-color"><i id="i-shuffle" class="fas fa-random fa-2x"></i></button>
    </div>
    <div id="setup" title="SetUp">
        <button id = "btnSetup" class="btn-color"><i id="i-setup" class="fas fa-cog fa-2x"></i></button>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;