javascript - 更改响应式 css 的 css 类

Question

我只需要在我的响应式 css 上进行更改，我不希望它影响我的正常 css？我怎样才能用代码做到这一点。这是我的 js:

$("#open-button").click(function () {
    $('#additem').css({ 'margin-left': '10%' });
});

下面是我的CSS和响应式CSS

/*normal css*/
#additem{
    margin-left:0;
}

/*responsive css*/
@media all and (max-width: 1366px) {
    #additem{
        margin-left: 25%;
    }
}

Answer 1

.css() 更改元素的 inline 样式 - 它不知道，也不能更改媒体查询，因为媒体查询不能存在于 inline 中状态。

添加类而不是更改 CSS。然后，您可以在特定媒体查询中为此类应用边距:

CSS

/*normal css*/
#additem{
    margin-left:0;
}

/*responsive css*/
@media all and (max-width: 1366px) {
    #additem{
        margin-left: 25%;
    }
    #additem.small-margin{
        margin-left: 10%;
    }
}

jQuery

$("#open-button").click(function () {
    $('#additem').addClass('small-margin');
});