[英]Occupy the least possible but still reasonable space in responsive layout
我正在编写一个数量选择器按钮并希望它能够响应。 也就是说,我希望减号和加号只包含图标所需的宽度,中间的输入是最大宽度。
我想知道如何使用 scss 来解决这个问题。
HTML:
<div class="quantity-select-container">
<div class="btn btn-minus">
<span class="icon icon-minus">
</span>
</div>
<input value="1" type="number" min="1" max="100" step="1" pattern="[0-9]*" class="form-control product-detail-quantity-select">
<div class="btn btn-plus">
<span class="icon icon-plus"></span>
</div>
</div>
SCSS:
.quantity-select-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0 0;
border: 1px solid black;
grid-auto-flow: row;
grid-template-areas: "minus input plus";
.btn-minus {
grid-area: minus;
}
input {
text-align: center;
grid-area: input;
padding: 2px;
width: 100%;
}
.btn-plus {
grid-area: plus;
}
.btn-minus,
.btn-plus {
cursor: pointer;
display: flex;
justify-content: center;
}
}
grid-template-columns: 45px auto 45px;
可以解决这个问题,但不是有效的,因为在窄屏幕上,按钮重叠并遮挡了输入,因此它适用于大屏幕,而在小屏幕上不起作用
min-content
with clamp
是你最好的朋友,它可以在小屏幕上将一些盒子调整到尽可能小的宽度,同时在屏幕上有足够的空间时保持合理的宽度
#grid{ grid-template-columns: min-content 1fr min-content; display: grid; font-size:25px; } #grid > *{ display: flex; justify-content:center; padding-block: 5px; }.to-shrink{ background:red; padding-inline: clamp(2px, 3vw, 30px); }
<div id="grid"> <div class="to-shrink">smol</div> <div>bigg</div> <div class="to-shrink">smol</div> </div>
为了更好地说明此组合的作用,请查看下面的 gif 并注意填充如何因clamp
而发生变化:
进一步到 go,您还可以将 clamp 应用到字体,或者在您的情况下,应用图标本身的大小,同时仍然在网格布局上保持 min-content
问题未解决?试试以下方法:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.