适应屏幕大小时的媒体查询错误

我已经安装了Wordpress 3.6.1和网格视网膜准备好的单页WordPress主题。在我的主题中，我已经在Wordpress Dashboard中为我的顶级菜单创建了两个CSS类“redback”和“greenback”，以便分别放置在右侧的“ESPAÑOL”和“FRANÇAIS”按钮上，如您所见在网站上：Website 适应屏幕大小时的媒体查询错误

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

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

你有什么建议吗？

我在此先感谢您，任何帮助表示感谢。

来源

2013-10-15 David

我在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();

来源

2013-10-15 17:22:33 Corey

我刚才在下面的评论中回答了你。预先感谢您的时间！ – David

添加了一些示例jQuery – Corey

非常感谢您的回复，jQuery代码并不完全是这样，但我想我即将拥有解决方案。谢谢您的宝贵时间和考虑，我验证您的回复。 – David

好吧，我已经尝试了第一种方法，BU确实，这有点肮脏。我想尝试第二种方法，从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-17 10:56:13 David

适应屏幕大小时的媒体查询错误

回答

相关问题