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

1. 使用 CSS clamp() 函数（推荐） #

这是最简洁的方案，完全替代你写的一堆媒体查询，同时实现流畅的相对缩放+固定最大/最小值：

max-width: clamp(400px, 50vw, 600px);

• 第一个值 400px：元素的最小宽度，对应你媒体查询里的最小阈值
• 第二个值 50vw：视口宽度的50%，作为缩放时的相对基准，确保元素随视口流畅缩放
• 第三个值 600px：元素的最大宽度，对应你媒体查询里的上限

这个函数会自动在视口变化时平滑过渡，不需要写任何媒体查询，完美解决你说的"缩放不够流畅"和"代码冗余"问题。

2. 调整百分比的参照容器 #

如果你坚持想用百分比，问题出在你的50%是参照body的宽度，但body可能设置了固定的max-width（比如常见的max-width: 1200px），导致缩放时body宽度不变，div自然不会跟着放大。

解决方法是让div的参照容器直接关联视口：

• 给div的父容器设置width: 100vw（占满视口宽度），然后div用max-width: 50%
• 或者直接给div用max-width: 50vw，效果和上面一致

示例代码：

/* 直接用vw替代百分比 */
.your-div {
  max-width: 50vw;
  /* 可以加个最大宽度限制，避免太宽 */
  max-width: min(50vw, 600px);
}

3. 结合calc() 做更精细的控制 #

如果需要调整边距等细节，可以用calc()结合vw：

max-width: calc(50vw - 4rem);

这里的4rem可以用来抵消左右的padding/margin，确保元素不会贴满视口边缘，同时保持缩放流畅。

内容的提问来源于stack exchange，提问作者Petr Chutný