如何在屏幕变窄时将元素拉近

Question

我使用负边距来导致一些扑克牌元素重叠，从而产生类似于现实生活中一手扑克牌的视觉效果。

这里的问题是在vw中定义了负裕度。这意味着，随着屏幕尺寸的扩大，单个vw的值变得更大，负裕度增加，导致卡片重叠更多。这与我的意图相矛盾——随着屏幕的扩大，卡片应该相应地展开，随着屏幕的缩小，卡片会重叠得更多。

如果我使用像px这样的绝对值，则随着屏幕大小的变化，重叠将保持不变，这也是不希望的。

我已经花了很多小时试用&这是错误的，还没有想出一个正确的方案。

如果CSS不能单独做到这一点，那么使用CSS或使用JS，如何才能使负边距随着屏幕的增加而减少？

Answer 1

Codepen

您可以将clamp()与relative定位相结合。你可能需要稍微调整一下数值，使其看起来好看，但这是核心概念。

:root {
--cardWidth: 200px;

--min: calc(var(--cardWidth) / 8);
--var: 7.5vw;
--max: calc((var(--cardWidth) / 4) * 7);

--overlap: clamp(
var(--min),
var(--var),
var(--max)
);
}
body {
display: grid;
place-items: center;
margin: 0;
}
.w {
display: flex;
}
[class*=card] {
height: 300px;
width: var(--cardWidth);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px -1px #000;
}
.card-2 {
position: relative;
left: calc((var(--cardWidth) * -1) + var(--overlap));
}

<div class="c"></div>
<div class="w">
<div class="card"></div>
<div class="card-2"></div>
</div>

Answer 2

您只需使用flex box即可。测试https://css-tricks.com/snippets/css/a-guide-to-flexbox/。