有没有办法以特定数字的增量/倍数调整css元素的大小？

Question

我希望任何 div 元素在视口大小发生变化时调整大小，所以通常我可以使用例如flex 或 10em 或 % - 但实际上我希望它只以 30 像素为增量调整大小，因此它始终与背景对齐。

这可能吗？

我能想到的唯一方法是不复存在 - 以前使用 mod 运算符可能是可行的，但现在不行？

Using modulus in css calc function

我也可以通过媒体查询来实现这一点，但将其设置为仅 30 像素的增量将是一场噩梦。

下面的 sn-p 的最大宽度为 210 像素，最小宽度为 30 像素。当浏览器从宽变窄时，它应该只以 30px 的增量跳跃。

.Mlt{
   background-color:grey;
   min-width:60px;
   max-width:210px;
}

<div class="Mlt">
    <p>Hello</p>
    <p>Content</p>
</div>

Answer 1

CSS 网格可以做到这一点，但您需要一个额外的容器。诀窍是使用auto-fit 创建宽度为30px 的列，然后您只需跨越所有创建的列：

_{jquery 的使用仅用于演示目的，以显示调整大小的宽度。我还删除了最大宽度以轻松测试}

console.log($('.Mlt > div').width());
$(window).resize(function() {
  console.log($('.Mlt > div').width());
})

.Mlt {
  min-width: 60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,30px);
  /* justify-content: center; <-- use this if you want to center the div */
}

.Mlt > div {
  grid-column:1/-1; /* take all the columns */
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Mlt">
  <div >
    <p>Hello</p>
    <p>Content</p>
  </div>
</div>

Answer 2

这不是我所说的容易让人眼前一亮，但是，这是我能想到的最佳解决方案：

const div = document.querySelector('.Mlt');

window.addEventListener('resize', () => {
  if (div.clientWidth >= window.innerWidth - 20) {
    div.style.width = div.clientWidth - 30 + "px";
  } else if (div.clientWidth < window.innerWidth - 20) {
    div.style.width = div.clientWidth + 30 + "px";
  }

  // Display div width
  document.getElementById('div-width').innerHTML = div.style.width;
})

.Mlt {
  background-color: grey;
  min-width: 60px;
  max-width: 510px;
}

<div class="Mlt">
  <p>Hello</p>
  <p>Content</p>
</div>

<!-- Display div width -->
<div id="div-width"></div>

如果这就是你所追求的，那就依赖 JS。使用 CSS，除了设置不合理数量的媒体查询外，我没有看到任何其他方法，就像你说的那样。

当divs 到达视口边缘时，其宽度会增加和减少 30 的倍数。我在 window.innerWidth 上设置了负 30，因为这就是它在 JSFiddle 的预览窗口中所需要的，你可能需要稍微调整一下。

你可以在这里测试它：https://jsfiddle.net/L61sq3fd/1/