How do I procedurally adjust media queries with pixel accuracy using javascript or jquery?

Question

I have multiple media queries with 20px increments that adjust margin-top by 5-10px to create a fluid height resize effect.

Is there a way to do this in 1-2px increments using javascript or jquery? Below is the code I'm currently using, but I'm curious if this can be done with just a few lines of code in a cleaner fashion to create a more fluid effect.

div ID is #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

This doesn't give the exact same results but it may help:

@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并在循环中以编程方式编写所有这些代码...