javascript - 屏幕尺寸变化时 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; }