用于调整CSS类填充的jQuery代码

在我的网页上，我设置了两个CSS类“redback”和“greenback”，对应于我的顶部菜单部分“ESPAñOL”和“franchais”，将它们放在右边。 但我对媒体查询有一个问题：在宽度767px下，两个CSS类与屏幕不匹配。我希望它们与我的顶部菜单中的其他CSS类垂直排列（也就是说没有任何填充或边距）。 我不能在媒体查询文件的每个屏幕大小中直接更改CSS类，因为这样，它将与767px以下的屏幕不匹配

我发现唯一的解决方案是直接调整jQuery文件中的两个CSS类，告诉他我不需要任何填充。（除非有人有任何CSS解决方案）。 但我完全了解jQuery代码

以下是我的CSS两个类：

.redback {font-size:15px; color:#1b1c1e; padding:0px 10px 0px 120px; font-weight:400; width: 50px; position: relative; }
.greenback {font-size:15px; color:#1b1c1e; padding:0px 20px 0px 10px; font-weight:400; width: 50px; }

下面是我的jQuery代码：

jQuery(document).ready(function(){


    jQuery('#nav-button').click(function() {
            jQuery('#options li').toggle();
    });

    if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();
    });
    }

    jQuery(window).resize(function() {
  if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();

    jQuery(window).resize(function() {
  if ( jQuery(window).width() > 767) {
            jQuery('#options li').show();
            jQuery('#options li a').click(function() {
            jQuery('#options li').show();
    });
    }
    });

}); 

jQuery（文档）.ready（函数（）{
jQuery（“#导航按钮”）。单击（函数（）{
jQuery（“#options li”）.toggle（）；
});
if（jQuery（window）.width（）<767）{
jQuery（“#options li a”）。单击（function（）{
jQuery（'#options li'）.hide（）；
});
}
jQuery（窗口）.resize（函数（）{
if（jQuery（window）.width（）<767）{
jQuery（“#options li a”）。单击（function（）{
jQuery（'#options li'）.hide（）；
jQuery（窗口）.resize（函数（）{
if（jQuery（window）.width（）>767）{
jQuery（'#options li'）.show（）；
jQuery（“#options li a”）。单击（function（）{
jQuery（'#options li'）.show（）；
});
}
});
}); 

---

我提前感谢您的建议，非常感谢您的帮助。

关于您的css媒体查询：

媒体=“全部” @仅介质屏幕和（最大宽度：767px） .redback和.greenback您需要删除将文本推向一侧的填充。

---

你所需要的只是每个查询的颜色样式。

你应该使用CSS媒体查询。你引用了它们，但实际上没有在代码中使用任何查询。这就是为什么我需要帮助，因为我不知道如何在我的jQuery文件中构建它，我对此一无所知。