我如何使mu按钮随着屏幕尺寸缩小？

Question

我的JavaScript代码已基于JSON文件中的内容生成了按钮。使用显示网格结构，我设法使其成为一种格式，每行最多2个按钮。但是，这样做之后，似乎出现了样式问题，因为较大的按钮从屏幕上消失了。我如何做到这一点，以便随着屏幕的缩小，按钮仍然可见，但可能会更小。这是我的CSS代码：

.answers{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0px 0px
  grid-column-gap: 10px;
  grid-template-rows: auto;
  text-align: center;
  grid-auto-flow: row;
	overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我尝试查看是否存在保证金问题，但没有。不仅如此，我想将容纳答案的容器居中。任何人都可以建议一种缩小按钮大小的方法，但是无论大小如何，都仍然可以看到其中的标签/文本。

Answer 1

通常用CSS media rules完成，这是一个看起来像的例子：

.button { width: 50px; }

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

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

这只是一个带有width元素的简单示例，但是您的想法是，您要弄清楚当屏幕到达特定点时CSS需要如何变化，然后将这些CSS规则添加到[ C0]规则部分。例如，更改页边距或填充，或从行的@media过渡到列，等等。