css - 调整屏幕大小时的媒体查询错误

Question

我已经安装了 Wordpress 3.6.1 和 Grid Retina Ready One-Page Wordpress 主题。 我在我的主题中为我的顶部菜单创建了两个 CSS 类“redback”和“greenback”，以便分别在右侧放置“ESPAÑOL”和“FRANÇAIS”按钮，如您所见网址:Website

为了使网站菜单适应不同尺寸的屏幕，我已经解决了所有的媒体查询文件。它有效，除了宽度低于 767px 的屏幕(在手机上)。 “ESPAÑOL”和“FRANÇAIS”这两个词并不垂直排列。 我尝试了很多解决方案，但没有任何效果。

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

您对此有什么建议吗？

在此先感谢您，我们将不胜感激。

Answer 1

我在 chrome 开发工具中玩过这个，我认为如果你“重置”你的两个类，事情就会完美地排列起来。所以例如你可以这样做:

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