css - 根据屏幕大小分组按钮

Question

我正在尝试将两个按钮组合在一起。

我有一个适用于大屏幕的设计，两个按钮在同一条线上向右浮动。但是，在调整大小时，有一个按钮可以进入文本：

要求是：

• 当屏幕足够大（工作正常）时按钮位于文本的右侧
• 当屏幕变小时，按钮会相互叠加（而不是像屏幕截图中那样彼此相邻）。在这种情况下，它们也应该具有相同的宽度。

Answer 1

当然，您只需要在CSS中使用媒体查询。

在媒体查询中，您可以定义最小宽度或最大宽度。最小宽度可让您说出x屏幕宽度和更大，请遵循这组样式。最大宽度为x屏幕宽度且更小。最佳做法是首先使用最小宽度和样式将您的网站设置为较小的屏幕，然后在媒体查询的基础上应用更复杂的样式。但是，如果您只需要一个元素，那么可以解决这个问题：

@media screen and (max-width: 768px) {
    .button-container {
        float: none;
        display: block;
    }
    .button {
        width: 200px;
        display: block;
    }
}