Question

我在网页上有几个元素可以响应屏幕大小。总是存在偶数个元素，并且它们总是具有相同的高度和宽度，因此当存在四个元素时，在桌面屏幕上，每个元素将是屏幕宽度的四分之一。为了将元素与观察者区分开来，我将它们替换为颜色，如下所示：

当屏幕尺寸发生变化时，我的CSS会自动减少每行的元素数量，将它们移动到多行。在瘦屏幕上，这看起来像这样：

然而，当屏幕尺寸稍微宽一点但仍小于桌面时，我希望每行有两个元素。问题在于：当我这样做时，它们不是形成棋盘格图案，而是保持元素彼此区分，它们当然形成相同颜色的列：

这是一个问题，因为当元素没有边距分隔时，你不能在每列中分开各行。那么，我的问题是如何让元素始终自动形成棋盘图案，无论它们是一行，一列还是多行和多列？

现在，我用PHP生成元素，因此为每个元素分配一个表示其颜色的类。我对使用PHP，CSS或JavaScript的解决方案持开放态度，但无论屏幕大小如何，它都应该可以正常工作，并且应该自动更改元素＆＃39;每当屏幕调整大小时，颜色都适合棋盘图案。

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; }