如何使用相对 CSS 尺寸（%、vw、vh）并保留用户缩放/缩放

Question

我已经编写了一个网站并使用了百分比宽度，如下所示：

max-width: 50%

当用户缩放网站时，文本和其他 div 缩放正常，但这些百分比设置的 div 放大速度非常慢。感觉%的原点（即主体）实际上并没有在场景后面改变太多其大小值，因此事物没有按比例缩放。

有什么方法可以继续使用 % 或 vw（视口宽度）值并允许良好的缩放吗？

我不得不创建太多的媒体查询并使用 px 值来解决这个问题：

  @media (min-width: 860px) {
    max-width: 400px;
  }
  @media (min-width: 1200px) {
    max-width: 600px;
  }
  @media (min-width: 1500px) {
    max-width: 600px;
  }
  @media (min-width: 1800px) {
    max-width: 600px;
  }
  @media (min-width: 2100px) {
    max-width: 600px;
  }

我已经尝试过%，但没有成功。

px 值可以很好地缩放，但我必须创建更多代码，而且它也不能流畅地缩放。

Answer 1

我不明白为什么你需要这么多媒体查询。但你尝试过吗

clamp

？我想这会对你有帮助。

.container {
    max-width: clamp(300px, 50%, 600px);
    background-color: blue;
    height: 200px; /* just to make it visible */
}

<div class="container"></div>

这将确保容器永远不会小于

300px

，永远不会大于

600px

，否则将随着

50%

宽度灵活缩放。只需确保夹子受到支撑。

您可以在此处找到更多有关

clamp

行为方式的信息。