適應屏幕大小時的媒體查詢錯誤

我已經安裝了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

適應屏幕大小時的媒體查詢錯誤

回答

相關問題