css - 组按钮取决于屏幕大小

Question

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

我有一个在大屏幕上工作的设计，两个按钮在同一行上向右移动。但是调整的时候，有一个按钮，将获得到文本：

的要求是：

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

Answer 1

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

在您的媒体查询中，您可以定义最小宽度或最大宽度。最小宽度可以让你说在x屏幕宽度和更大的情况下，遵循这组样式。最大宽度为x屏幕宽度和更小。最佳做法是先使用最小宽度并将您的网站设置为较小的屏幕，然后在媒体查询的基础上应用更复杂的样式。但是，如果您只需要一个元素，则可以继续工作：

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