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()更改元素的内联样式 - 它不知道，也不能更改媒体查询，因为媒体查询不能以内联状态存在。

添加一个类而不是更改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');
});

Answer 2

您应该尝试不使用jquery内联编辑css参数。您可以随时使用：

toogleClass（）：http://api.jquery.com/toggleClass/
addClass（）：http://api.jquery.com/addClass/
removeClass（）：http://api.jquery.com/removeClass/

在这种情况下，您可以在CSS文件中准备一些额外的类，并使用设备的最小和最大宽度为它们制定特殊规则。

将来如果有什么不行，你必须修改的只是CSS文件，而不是jquery或javascript文件。这是一个很好的做法。

我认为jQuery CSS和可见性函数仅在计算宽度，填充，边距和动画时才会生成。例如颜色循环。

简单的css规则应使用上述功能实现，而不是直接在js文件中输入。

Answer 3

这样做的一种方法是使用matchMedia在JS中使用媒体查询

$("#open-button").click(function () {
    if (window.matchMedia('(max-width: 1366px)').matches) {
        $('#additem').css({ 'margin-left': '10%' });
    }
});

更改响应式css的css类

3 个答案: