CSS-根據屏幕大小，分組按鈕有所不同

Question

我試圖將兩個按鈕組合在一起。

我有一個適用於大屏幕的設計，其中兩個按鈕在同一行的右側浮動。 但是，調整大小時，只有一個按鈕可以顯示在文本上：

要求是：

• 屏幕足夠大時，按鈕位於文本的右側（工作正常）
• 屏幕變小時，按鈕會彼此疊置（而不是如屏幕快照中那樣彼此疊置）。 在這種情況下，它們也應具有相同的寬度。

Answer 1

當然，您只需要在CSS中使用媒體查詢即可。

在媒體查詢中，您可以定義最小寬度或最大寬度。 最小寬度可讓您說在x屏幕寬度或更大的屏幕上，請遵循此樣式。 最大寬度為x屏幕寬度或更小。 最佳做法是先使用最小寬度並為較小的屏幕設置網站樣式，然后再通過媒體查詢在網站上應用更復雜的樣式。 但是，如果您只需要一個元素，則可以降低工作量：

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