繁体   English   中英

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

[英]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.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM