窗口宽度>1200px时，如何让视口以1200px为最大宽度适配vw单位？

不用重新设计PC端页面！你遇到的问题核心在于vw单位是基于浏览器视口宽度计算的，和容器的max-width无关，所以直接给body设max-width不会限制vw的缩放。这里有几个简单高效的方案，帮你快速解决：

方案一：用CSS变量+媒体查询锁定最大缩放比例 #

这是最灵活的方法，只需要替换你代码里的vw单位，不用逐个修改数值：

1. 首先在:root里定义一个自定义变量，用来替代vw：

:root {
  /* 默认情况下，--vw等价于1vw */
  --vw: calc(100vw / 100);
}

2. 添加媒体查询，当视口宽度超过1200px时，把--vw固定为12px（因为1200px的1%就是12px）：

@media (min-width: 1200px) {
  :root {
    --vw: 12px;
  }
}

3. 把你代码里所有的vw单位替换成这个变量的倍数，比如：

• 原来的font-size: 5vw; → font-size: calc(5 * var(--vw));
• 原来的padding: 2vw 3vw; → padding: calc(2 * var(--vw)) calc(3 * var(--vw));

4. 最后给body设置居中样式：

body {
  max-width: 1200px;
  margin: 0 auto;
  /* 可选：给小屏设备加一点内边距，避免内容贴边 */
  padding: 0 calc(2 * var(--vw));
}

这样一来，当窗口宽度≤1200px时，元素还是按vw正常缩放；一旦超过1200px，--vw就固定为12px，元素不再变大，同时body居中，两侧自然出现留白边栏。

方案二：用clamp()函数直接限制单个属性的范围 #

如果你不想用CSS变量，也可以直接用clamp()函数给每个vw属性设置最大值。比如，某个元素原来用3vw，在1200px视口下是36px，那你可以写成：

.element {
  /* clamp(最小值, 动态值, 最大值) */
  font-size: clamp(16px, 3vw, 36px);
}

这个方法的缺点是需要逐个计算每个属性在1200px下的对应值，但适合修改少量元素的场景。

为什么之前的max-width没用？ #

再帮你理清楚原因：vw的计算依据是浏览器视口的宽度，不是父容器的宽度。哪怕body被max-width限制在1200px，只要窗口宽度超过1200px，1vw还是等于窗口宽度的1%，所以元素会继续放大，导致布局崩溃。上面的方案就是通过锁定vw的最大值，让元素在大屏下不再跟随视口缩放。

内容的提问来源于stack exchange，提问作者Mateusz Iwaniszczuk