如何使填充在全屏时从最大值开始，但随着浏览器宽度变小逐渐缩小到最小值？

Question

我一直在使用 padding-left: clamp( 60px, calc( value - value ), 186px) 但似乎无法弄清楚当我缩小浏览器的宽度时如何正确缩小填充

Answer 1

使用 ems 而不是像素。浏览器默认的 1em 是 16 像素，ems 相对于父级的大小而变化，但是当用于边距、填充和宽度时工作方式有点不同

.example {
font-size: 1rem;
padding: 1em;
}

在上面的示例中，填充将相对于字体大小而不是父级。所以填充会随着字体大小的缩小而缩小，并随着字体大小的增加而增加。

Answer 2

这有帮助吗？

.element {
  padding: 100px;
}

@media screen and (max-width: 1200px) {
  .element {
    padding: calc(100px - ((100px - 20px) * ((100vw - 320px) / (1200 - 320))));
  }
}

Answer 3

为我的问题找到了解决方案。最后使用了一个带有百分比宽度的额外 div，并在我想要的值上使用了 min-width + max-width。