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

Posted 2023-03-06

【中文标题】调整屏幕大小时出现媒体查询错误

【英文标题】：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 类放在每个屏幕类别大小的媒体查询文件中，似乎没有任何效果。

你有什么建议吗？

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

【参考方案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();
    );
    
    );

);

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