在响应式布局中占用尽可能少但仍然合理的空间

Question

我正在编写一个数量选择器按钮并希望它能够响应。 也就是说，我希望减号和加号只包含图标所需的宽度，中间的输入是最大宽度。

我想知道如何使用 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; 可以解决这个问题，但不是有效的，因为在窄屏幕上，按钮重叠并遮挡了输入，因此它适用于大屏幕，而在小屏幕上不起作用

Answer 1

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