如何使用javascript或jquery以像素精度按程序调整媒体查询？

我有多个介质查询，以20px为增量，将边距顶部调整5-10px，以创建流体高度调整效果

有没有一种方法可以使用javascript或jquery以1-2px的增量实现这一点？下面是我目前正在使用的代码，但我很好奇是否可以用几行代码以更干净的方式来创建更流畅的效果

div ID为

#下滑1

@media (min-width:1000px) and (max-width:1020px) {
#underslider1 { margin-top: 90px !important;}
}

@media (min-width:980px) and (max-width:1000px) {
#underslider1 { margin-top: 85px !important;}
}

@media (min-width:960px) and (max-width:980px) {
#underslider1 { margin-top: 80px !important;}
}

@media (min-width:940px) and (max-width:960px) {
#underslider1 { margin-top: 75px !important;}
}

@media (min-width:920px) and (max-width:940px) {
#underslider1 { margin-top: 70px !important;}
}

@media (min-width:900px) and (max-width:920px) {
#underslider1 { margin-top: 65px !important;}
}

@media (min-width:880px) and (max-width:900px) {
#underslider1 { margin-top: 55px !important;}
}

@media (min-width:860px) and (max-width:880px) {
#underslider1 { margin-top: 45px !important;}
}

@media (min-width:840px) and (max-width:860px) {
#underslider1 { margin-top: 35px !important;}
}

@media (min-width:820px) and (max-width:840px) {
#underslider1 { margin-top: 25px !important;}
}

@media (min-width:790px) and (max-width:820px) {
#underslider1 { margin-top: 10px !important;}
}

---

您可以使用JavaScript API

窗口。matchMedia

并在循环中以编程方式编写所有这些内容…

这不会给出完全相同的结果，但可能会有所帮助：

@media (min-width: 790px) and (max-width: 1020px) {
    #underslider1 {
        margin-top: calc( 10px + (90 - 10) * ( (100vw - 790px) / ( 1020 - 790) ));
    }
}

---

与其这样做，我建议您调查导致顶部滑块出现故障的原因。尽管您可以使用JavaScript实现您想要的功能（处理窗口

调整大小

事件，获取窗口的

宽度

并相应地设置

边距顶部

），但这几乎不是正确的方法。在我看来，你是在试图用一个黑客解决方案来弥补某个地方的错误。我可以知道为什么在

1000px到840px的宽度范围内使用
media query
，而不是使用流行的屏幕大小吗？这不是我的网站，我花了大约5个小时试图找到问题，虽然我发现了它，这将破坏网站上的其他100个页面。我只是在帮他们做一个页面。给他们更多的bug和混乱。@Viksool这是整个站点边距从40px到0px的点，我的下一行消失，直到它重新出现。这是我需要的解决方案，因为某种原因我没有想到。@JeremiahSamuelKrakowski这与你的css解决方案有何不同？@andriusain抱歉，我是新来的！学习这个系统。谢谢@它可以以适当的比率更快地循环通过。这基本上是相同的解决方案。我想知道如何解释这样一个事实：屏幕越小，所需的边距顶部的比率就越大。这正是我所需要的。