如何使用javascript或jquery程序化地調整像素精度的媒體查詢？

Question

我有多個具有20px增量的媒體查詢，可以將邊距頂部調整5-10px，以創建流暢的高度調整效果。

有沒有辦法使用javascript或jquery以1-2px的增量執行此操作？ 以下是我當前正在使用的代碼，但我很好奇是否可以用幾行代碼以一種更簡潔的方式完成此操作，從而產生更流暢的效果。

div ID為#underslider1

@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;}
}

Answer 1

這不會給出完全相同的結果，但可能會有所幫助：

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

Answer 2

您可以使用JavaScript API window.matchMedia並在循環中以編程方式編寫所有這些代碼...