如何无需@media查询实现随屏幕尺寸动态变化的响应式外边距？

我们可以通过线性插值公式结合CSS的calc()和max()函数，实现你要的效果：小屏幕（300px）外边距接近0%，大屏幕（2000px）达到20%，全程平滑过渡，无需媒体查询。

公式推导 #

设屏幕宽度为w（px），目标外边距百分比为m，我们需要满足两个条件：

• 当w=300px时，m=0%
• 当w=2000px时，m=20%

线性关系的斜率为：(20% - 0%)/(2000px - 300px) = 20/1700

最终转换为CSS可用的表达式：

--page-margin: max(0%, calc((100vw - 300px) * 20 / 1700));

• 100vw代表当前屏幕的总宽度（1vw = 屏幕宽度的1%）
• max(0%, ...)确保小屏幕（小于300px）时外边距不会变成负数
• 乘以20/1700是为了让宽度差按比例映射到0%-20%的外边距区间

修改后的完整代码 #

:root {
  --page-margin: max(0%, calc((100vw - 300px) * 20 / 1700));
}
body {
  margin: 0;
  background-color: skyblue;
}
div {
  background-color: grey;
  height: 100vh;
  margin: 0 var(--page-margin);
}

<div></div>

自定义调整说明 #

如果需要修改临界点或目标值，只需调整公式中的参数：

• 把300px换成你想要的最小屏幕宽度（对应外边距0%）
• 把2000px换成目标大屏幕宽度
• 把20换成目标大屏幕的外边距百分比

比如想让1000px屏幕对应15%外边距、300px对应0%，公式就变成：

--page-margin: max(0%, calc((100vw - 300px) * 15 / 700));

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