0

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

我发现唯一的解决方案是直接在我的 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();
    });
    }
    });

});

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

4

1 回答 1

1

在您的 CSS 媒体查询中：

media="all" @media only screen and (max-width: 767px) .redback 和 .greenback 您需要删除将文本推到一边的填充。您只需要每种颜色样式即可。

于 2013-10-18T16:39:32.217 回答