是否可以根据屏幕尺寸设置表格选项?

Question

我想知道我们是否可以使用 Javascript 进行集合，多表选项 例如，如果有这样的表：

<div>
<table>
<tr>
<td>bla bla</td>
<td>bla bla</td>
<td>bla bla</td>
<td>bla bla</td>
</tr>
</table>
</div>

因此，如果屏幕尺寸超过1200px它应该在一行上显示所有 4 个td元素 如果屏幕尺寸介于800px到1200px之间，则一行应仅显示 3td如果屏幕尺寸介于500px到800px之间，则一行应仅显示 2td如果小于500px则应在一行上仅显示一个td

我知道如何只显示最后一个选项，更不用说我可以在 CSS 中添加500pxdisplay:block

但是有可能制作 4 个变体吗？

Answer 1

你不能像 CSS 媒体查询一样使用 js 使用事件侦听器来调整窗口大小并根据窗口宽度检查显示多少列。 或者也许只有 CSS 显示：无和一些媒体查询

Answer 2

你也许可以在不使用javascript的情况下完成你正在尝试做的事情，而是使用媒体查询。

我可以在这里找到关于媒体查询的良好入门(教程)。