1

我已经安装了 Wordpress 3.6.1 和 theGrid Retina Ready One-Page Wordpress Theme。我在我的主题中创建了两个 CSS 类“redback”和“greenback”，在 Wordpress Dashboard 中，用于我的顶部菜单，以便将“ESPAÑOL”和“FRANÇAIS”按钮分别放在右侧，如您所见网站：网站

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

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

你有什么建议吗？

我提前感谢你，任何帮助表示赞赏。

4

2 回答 2

0

好的，我尝试了第一种方法，但确实有点脏。我想尝试第二种方法，来自 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();
    });
    }
    });

});

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

于 2013-10-17T10:56:13.297 回答
0

我在 chromes 开发工具中玩过这个，我认为如果你“重置”你的两个类，事情就会完美排列。因此，例如，您可以这样做：

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

不过有点脏。您也可以只在该屏幕尺寸下对类进行 javascript 处理，然后让它们继承其余 li 的属性。

无论如何，我都不是 JS/jQuery 专家。事实上，我知道的很少，但根据这篇文章，我把它放在了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();
于 2013-10-15T17:22:33.603 回答