javascript - 是否可以从 Javascript 返回到 CSS 媒体查询声明？

Question

我有一个 DIV，我可以根据视口(viewport)大小调整 CSS 中的字体大小:

font-size:1em;
@media only screen and (min-width: 300px) {
    font-size:2em; 
}
@media only screen and (min-width: 600px) {
    font-size:3em; 
}

但是，我也有 Javascript 可以根据用户是否向下滚动来更改字体大小。

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('#div').css('font-size', '1em');       
    }
    else {
        $('#div').css('font-size', '3em');
    }
});

问题是，在用户向下和向上滚动至少一次后，Javascript 将 font-size 设置为 3em，并且 @media 声明不再适用。

是否有可能使在 Javascript else 子句中，样式恢复为在 CSS 和 @media 条件中声明的样式？

Answer 1

正如我已经评论过的，而不是使用 .css()它为元素定义内联样式具有最高优先级，因此您可以再次使用 jQuery 重置它，如果您在 if 中有多个属性要重置/更改，这很脏或者可能变脏else .

所以不用 .css() 你应该使用 .addClass()和 .removeClass()方法并将很好地完成您正在寻找的东西。