响应式设计中具有恒定空间的比例宽度

Propertional width with constant spaces in responsive design

我在开发响应式组件时遇到问题,该组件按比例缩放某些按钮的宽度,但具有恒定的 spaces。

在下面的示例中,小箭头都是 15px,我希望按钮根据框的最大宽度放大或缩小,但 spaces 保持不变。 我试过这个属性:calc((100% / ${allEleemnts}) - (${spaces} / 2)),

但是当页面放大或缩小时,我并没有完全获得所有元素之间完全相同的 space。 我非常感谢对我的尝试以及成功缩放某些元素的宽度同时在它们之间保持恒定 spaces 的人提供的一些反馈。

更好的实现方式是通过 CSS 网格,您可以在其中访问 css 属性

gap: 10px; /* 10px is just an example*/

这会让您更好地控制布局并提供一致的空间,从而提高响应速度。

您可以通过以下方式了解 CSS 网格: https://www.w3schools.com/css/css_grid.asp