边距取决于屏幕尺寸和宽度可变

Question

我想根据屏幕尺寸在左侧创建可变边距。 屏幕宽度为 1351px，边距应为 12.583vw， 当屏幕宽度为 2250px 时，边距应为 29.802vw。

我怎样才能正确地做到这一点？我对最小/最大/钳位很陌生。我可能需要使用某种计算，但我不知道如何进行。请指教。

左边距：分钟（29.802vw，12.583vw）

Answer 1

您希望边距随着视口宽度的变化而连续变化，还是离散地变化？

那是... 对于所有宽度不超过 2250px 的边距为 12.583vw，对于宽度大于 2250px 的边距为 29.802vw，或者 随着屏幕宽度的增加，边距以超线性方式平滑增加。

前者将通过媒体查询完成：

@media (width >= 2250px) {
  div { margin-left: 29.802vw; }
}
@media (width < 2250px) {
  div { margin-left: 12.583vw; }
}

后者确实是某种形式的 calc():

body { margin: calc([some function]vw); }