Javascript 如何使mu按钮随屏幕大小而收缩？

我的JavaScript代码根据JSON文件中的内容生成了按钮。使用显示网格结构，我成功地将其转换为每行最多2个按钮的格式。然而，在我这样做之后，似乎出现了一个样式问题，因为更大的按钮会从屏幕上消失。如何使其在屏幕缩小时仍然可见，但可能更小。以下是我的CSS代码：

.答案{ 显示：网格； 网格模板柱：1fr 1fr； 网格模板行：0px 0px 栅柱间隙：10px； 网格模板行：自动； 文本对齐：居中； 网格自动流：行； 溢出：可见； }

---

这通常可以通过以下示例来实现：

.button { width: 50px; }

@media(max-width:500px) {
  .button { width: 30px; }
}

在本例中，元素将为50px，但当视口宽度缩小到500px以下时，宽度将更改为30px

---

这只是一个带有width元素的简单示例，但其思想是，当屏幕到达某个点时，您需要了解CSS需要如何更改，然后将这些CSS规则添加到@media rule部分。例如，更改页边距或填充，或从行到列的灵活方向转换，等等。

^^^一定要查看媒体查询。此外，CSS网格具有一些属性，可以满足您的需要。对齐项目：拉伸确保每个项目中的内容填满单元格的整个宽度。