如何批量配置随窗口高度线性变化top值的媒体查询？

完全不需要编写数百条媒体查询，用CSS的calc()结合视口单位vh就能轻松实现这个动态同步的效果。

根据你的需求：窗口高度为577px时红色盒子top值为300px，窗口高度每变化1px，top值同步增减1px。可以直接用以下代码实现：

.red-box {
  position: relative; /* 可根据布局需求改为absolute或fixed */
  top: calc(300px + (100vh - 577px));
}

原理说明 #

• 100vh对应当前窗口的总高度；
• (100vh - 577px)计算出当前窗口与基准高度577px的差值：
  • 窗口高度＞577px时，差值为正，top值比300px增加对应像素；
  • 窗口高度＜577px时，差值为负，top值比300px减少对应像素；
  • 窗口高度=577px时，差值为0，top保持300px。

这个方案是动态计算的，浏览器会自动根据窗口高度变化重新计算top值，完全不需要依赖媒体查询。

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