Question

我已经安装了Wordpress 3.6.1和the Grid Retina Ready单页Wordpress主题。我在我的主题中创建了两个CSS类“redback”和“greenback”，在Wordpress Dashboard中，为我的顶级菜单，为了分别在右边放置“ESPAÑOL”和“FRANÇAIS”按钮，你可以看到网站：Website

我已经确定了所有媒体查询文件，以使网站菜单适应不同大小的屏幕。它的工作原理，除了宽度为767px的屏幕（在手机上）。 “ESPAÑOL”和“FRANÇAIS”这两个词与另一个词没有垂直排列。我尝试了很多解决方案，但没有任何效果。

如果我更改CSS类“redback”和“greenback”以使其适应屏幕，那么它们与宽度为767px的屏幕不匹配。如果我将CSS类放在我的媒体查询文件的每个类别大小的屏幕中，似乎没有任何效果。

你有什么建议吗？

我提前感谢你，感谢任何帮助。

Answer 1

我在chromes dev工具中使用了这个，我想如果你“重置”你的两个类，那么事情就会完美排列。例如，您可以这样做：

    .redback, .greenback {
        padding: inherit
        margin: inherit
        etc.
    }

虽然有点脏。你也可以只是在那个屏幕尺寸上对这些类进行javascript，然后让它们继承其余的li属性。

我无论如何都不是JS / jQuery专家。事实上，我知道的很少但基于this post我把它放在CodePen中。您只需在适当的位置插入您的ID和类名。

<强> HTML

<p id="foo" class="blue">Color</p>

<强> CSS

p {
  font-size: 3em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.blue {
  color: blue;
}

.red {
  color: red;
}

<强>的jQuery

  $(window).resize(function(){
    var width = $(window).width();
    if(width < 767) {
      $('#foo').removeClass('blue').addClass('red');
    }
    else {
      $('#foo').removeClass('red').addClass('blue');
    }
  }).resize();

Answer 2

好的，我尝试过第一种方法，但实际上，它有点脏。我想尝试第二种方法，来自javascript，但我对此完全陌生。但是，我找到了以下代码，我可以在其中更改我的CSS类：

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();
    });
    }
    });

});

但是我不知道如何更改它以便应用之前告诉我的内容。（我只想从css类中删除所有填充“redback”和“greenback”，宽度为＆lt; 767）。

在调整屏幕大小时，媒体查询会出错

2 个答案: