[英]How do I make mu buttons shrink with screen size?
My JavaScript code has generated buttons based on contents in a JSON file.我的 JavaScript 代码根据 JSON 文件中的内容生成了按钮。 Using the display grid structure, I have managed to get it into a format with a max of 2 buttons per row.
使用显示网格结构,我设法将其转换为每行最多 2 个按钮的格式。 However, after I did that, there seems to be a styling issue as the bigger buttons go off the screen.
但是,在我这样做之后,似乎存在样式问题,因为屏幕上较大的按钮 go 不在屏幕上。 How do I make it so that as the screen shrinks the buttons are still visible but potentially smaller.
我如何做到这一点,以便在屏幕缩小时按钮仍然可见但可能更小。 Here is my CSS code:
这是我的 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>
I have tried seeing if there is a margin issue but there isn't.我试过看看是否存在保证金问题,但没有。 As well as this, I would like to centered the container which holds the answer to the middle.
除此之外,我想将包含中间答案的容器居中。 Could anyone suggest a method forward of shrinking the button size but still being able to see the label/text within, whatever the size.
任何人都可以提出一种缩小按钮大小的方法,但仍然能够看到其中的标签/文本,无论大小。
This would usually be accomplished with CSS media rules Here's an example of what that might look like:这通常可以通过CSS 媒体规则来完成 下面是一个可能看起来像这样的示例:
.button { width: 50px; }
@media(max-width:500px) {
.button { width: 30px; }
}
In this example the element would be 50px
, but when the viewport width shrinks below 500px
, the width would change to 30px
.在本例中,元素为
50px
,但当视口宽度缩小到500px
以下时,宽度将变为30px
。
This is just a simple example with a width
element, but the idea is that you figure out how your CSS needs to change when the screen gets to a certain point, and then you add whatever those CSS rules are to the @media
rule section.这只是一个带有
width
元素的简单示例,但想法是您弄清楚当屏幕到达某个点时您的 CSS 需要如何更改,然后将这些 CSS 规则添加到@media
规则部分。 For example, changing margins or padding, or transitioning from a flex-direction
of row to column, etc.例如,更改边距或填充,或从行到列的
flex-direction
转换等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.