響應式網頁設計 - 在桌面上無顯示

我正在嘗試構建響應式網頁設計，並且我幾乎完成了它。唯一的問題是導航菜單。我創建了兩個版本的導航菜單 - 一個用於桌面，另一個用於移動。我嘗試在CSS的桌面部分爲導航的移動版本執行「display：none」，但如果我這樣做，則菜單在移動版本中根本不會顯示。有什麼解決方案來解決這個問題？您可以在此處看到此網站：http://rachelchaikof.com/testing/響應式網頁設計 - 在桌面上無顯示

來源

2012-12-02 user1869585

取決於你試圖在這裏實現什麼。如果您設置「顯示：無」，則顯示粗糙。菜單將不會顯示。你還期待什麼？你應該改變CSS來獲得所需的顯示 – qais

通常，要獲得所需的效果，您需要在CSS樣式表中爲移動視圖創建媒體查詢，並在該部分中爲您的桌面設置相同的nav元素以不同的方式查看。

我今天晚上只能從iPad上查看你的網站，所以我沒有深入你的代碼。對不起，如果這太明顯了。

網站上的精彩內容！我在uChicago有一位朋友，他對植入物跨文化的社會方面進行了大量的研究。令人驚訝的是，我們在美國聽到的很少。

來源

2012-12-03 02:36:24

我爲混淆道歉。當人們在臺式電腦上查看時，我想隱藏＃mobile-nav。如何才能做到這一點？ – user1869585

你要沿着這行添加一些CSS ...

@media screen and (max-width:400px) { 
#mobile-nav { 
display:none; 
} 
}

這將隱藏移動導航菜單，如果屏幕尺寸小於400像素。您可能需要根據您正在測試的設備使用最大寬度。

或者，你可以使用這個PHP函數來檢查它是否是一個移動用戶代理，然後就換了手機菜單中的if語句PHP。 http://erikastokes.com/php/how-to-test-if-a-browser-is-mobile.php

來源

2012-12-03 03:31:28 mjerwin23

你可以不創建一個媒體查詢有最小寬度：700px（或任何你的手機斷點），並在此媒體查詢中，你可以顯示：無！重要＃mobile-nav？

來源

2012-12-04 23:45:06

使用了HTML 5和CSS與媒體查詢鍋爐板（向後兼容），我已經能夠得到顯示：無;在Moz工作。 FireFox，但無法使它在Safari，Chrome中運行，甚至不會在IE中嘗試它！您應該首先使用媒體查詢，迴應=手機。您的移動導航屬性應設置爲顯示：block;或內聯塊;然後當你點擊你的屏幕捕捉點設置屬性顯示：無;這將在Firefox中工作。對其他人的任何建議...請告訴..

來源

2013-01-19 19:05:03

如果您在媒體查詢之外編寫「display：none」，它將不會顯示出來。這是我面對我的項目

的一個我固定它使用類似：

 @media screen and (min-width:650px) { /*hide mobile menu for desktop*/ 
       .footer #exfootmenu{ 
        display:none; 
       } 
      }  


     @media screen and (max-width:650px) {/*show mobile menu for mobile devices*/ 
       .footer #exfootmenu{ 
        display:block; 
       } 
}

來源

2013-07-04 13:15:13 ambit

響應式網頁設計 - 在桌面上無顯示

回答

相關問題