屏幕尺寸变化时 HTML 元素的棋盘颜色答案

【问题标题】：Checkerboard colouring of HTML elements on screen size change屏幕尺寸变化时 HTML 元素的棋盘颜色
【发布时间】：2017-12-13 10:37:45
【问题描述】：

我的网页上有几个元素旨在响应屏幕尺寸。元素的数量总是偶数，并且它们的高度和宽度总是相同的，因此当有四个元素时，在桌面屏幕上，每个元素将是屏幕宽度的四分之一。为了向观众区分元素，我让它们交替使用颜色，如下所示：

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

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

这是一个问题，因为当元素没有用边距分隔时，您无法区分每列中的行。那么，我的问题是如何让元素始终自动形成棋盘格图案，无论它们都在一行、一列还是在多行多列中？

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

【问题讨论】：

【解决方案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; }

【讨论】：