调整屏幕大小时出现媒体查询错误答案

【问题标题】：Media-queries bug when adapting the size of the screen调整屏幕大小时出现媒体查询错误
【发布时间】：2013-10-23 14:20:52
【问题描述】：

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

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

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

你有什么建议吗？

在此先感谢您，感谢您的帮助。

【问题讨论】：

标签： css wordpress media-queries

【解决方案1】：

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

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

【讨论】：

我刚刚在下面的评论中回复了你。提前感谢您的宝贵时间！
添加了一些示例 jQuery
非常感谢您的回复，jQuery 代码并非完全如此，但我想我即将找到解决方案。感谢您的时间和考虑，我验证您的回复。

【解决方案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();
    });
    }
    });

});

但我不知道如何更改它以应用您之前告诉我的内容。（我只想将宽度

【讨论】：