更改响应css的css类

Changing css class for responsive css

本文关键字：css 响应      更新时间：2023-09-26

我只需要在我的响应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%;
    }
}

.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');
});

您应该尽量不要在jquery中编辑css参数。您可以随时使用：

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

  2. addClass（）：http://api.jquery.com/addClass/

  3. removeClass（）：http://api.jquery.com/removeClass/

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

在将来，如果出现问题，您所要修改的只是CSS文件，而不是jquery或javascript文件。这是一个很好的做法。

我认为jQueryCSS和可见性函数只有在计算宽度、填充、边距和动画的情况下才会生成。例如颜色循环。

简单的css规则应该使用上面的函数来实现，而不是直接在js文件中输入

一种方法是使用matchMedia在JS 中使用媒体查询

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