在屏幕尺寸上改变HTML元素的棋盘颜色

I have several elements on a web page that's intended to be responsive to screen size. There is always an even number of the elements, and they're always the same height and width, so that when there are four of them, on a desktop screen, each will be one quarter of the width of the screen. To distinguish the elements to the viewer, I have them alternate colour, like this:

我在web页面上有几个元素，它们可以响应屏幕大小。元素的数量总是为偶数，它们的高度和宽度都是相同的，所以当有四个元素时，在桌面屏幕上，每个元素的宽度都是屏幕的四分之一。为了区分不同的元素，我让它们交替使用不同的颜色，比如:

When the screen size changes, my CSS automatically reduces the number of elements per row, moving them to multiple rows. On a thin screen, this looks something like this:

当屏幕大小发生变化时，我的CSS会自动减少每行元素的数量，将它们移动到多行。在一个薄屏幕上，这个看起来是这样的:

However, when the screen size is a tiny bit wider, but still smaller than desktop, I want there to be two elements per row. Here's the problem: When I do that, instead of forming a checkerboard pattern, which would keep the elements distinguished from each other, they of course form columns of the same colour:

但是，当屏幕尺寸稍微大一点，但仍然比桌面小一点时，我希望每行有两个元素。问题是这样的:当我这样做的时候，我并没有形成棋盘式的图案，这种图案可以保持元素之间的区别，它们当然会形成相同颜色的列:

This is a problem, since when the elements aren't separated by a margin, you can't tell the rows apart in each column. My question, then, is how you would get the elements to always automatically form a checkerboard pattern, whether they're all in one row, one column, or in multiple rows and columns?

这是一个问题，因为当元素之间没有边距分隔时，您不能区分每一列中的行。那么，我的问题是，如何使元素总是自动地形成一个棋盘模式，不管它们都在一行、一列，还是在多行和多列中?

Right now, I'm generating the elements with PHP, so each element is assigned a class denoting its colour. I am open to a solution using PHP, CSS, or JavaScript, but it should work no matter the screen size, and should automatically change the elements' colour to fit the checkerboard pattern whenever the screen resizes.

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

1 个解决方案

#1

You should not define the actual colour, but eg the number. If you are dealing with 4, 2 and 1 per row, than use numbers 0-3 like this:

你不应该定义实际的颜色，而应该定义数字。如果你处理的是每行4、2和1，而不是像这样使用数字0-3:

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

Now you can use CSS media queries to define the colors for each screen width you want to change them.

现在，您可以使用CSS媒体查询来定义要更改的每个屏幕宽度的颜色。

For desktop:

桌面:

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

For the 2-by-2 layout:

2×2的布局:

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

#1