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规则@media规则部分。例如，更改页边距或填充或从flex-direction行到列的过渡等。

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

1 个答案: