屏幕大小變化時棋盤着色的HTML元素

Question

我在網頁上有幾個元素用於響應屏幕大小。總是存在偶數個元素，並且它們的高度和寬度始終相同，所以當它們中有四個時，在桌面屏幕上，每個元素都是屏幕寬度的四分之一。爲了區分元件給觀看者，我有他們替代顏色，例如：

當屏幕尺寸的變化，我的CSS自動減少每行的元素的數量，將它們轉移到多行。在薄的屏幕，這看起來是這樣的：

但是，當屏幕尺寸是一點點比臺式機更廣泛，但仍較小，我希望這是每行有兩個元素。這裏的問題：當我這樣做，而不是形成棋盤圖案，這將繼續相互區別的元素，他們同樣顏色的球道列：

這是一個問題，因爲當元素沒有被邊距分開時，你不能在每列中分開行。那麼我的問題是如何讓元素始終自動形成棋盤圖案，無論它們全部位於一行，一列還是多行和多列？

現在，我使用PHP生成元素，因此每個元素都被賦予一個表示其顏色的類。我接受使用PHP，CSS或JavaScript的解決方案，但無論屏幕大小如何，它都可以工作，並且應該在屏幕調整大小時自動更改元素的顏色以適應棋盤圖案。

Answer 1

你不應該定義實際的顏色，但是例如數字。如果你正在處理的4,2和1每行，比用數字0-3這樣的：

for ($i=0; $i < 20; $i++) { 
    echo '<div class="box box-'.($i % 4).'">...</div>'; 
} 

現在你可以使用CSS媒體查詢來定義顏色要改變他們每個屏幕的寬度。

對於桌面：

.box-0, .box-2 { color: blue; } 
.box-1, .box-3 { color: red; } 

對於2×2佈局：

.box-0, .box-3 { color: blue; } 
.box-1, .box-2 { color: red; }