隱藏桌面的div並將其顯示在手機中

我有一個粘性div作爲我的Topmenu。作爲標準，它始終顯示在所有頁面上，但我想將其隱藏在桌面模式中並在手機上顯示。隱藏桌面的div並將其顯示在手機中

所以這裏是我做了什麼：

@media (min-width: 992px) { 
    #sp-header-sticky-wrapper { 
     display: none; 
     visibility: hidden; 
     clear: both; 
     font-size: 0; 
     max-height: 0; 
     line-height: 0; 
     height: 0px !important; 
     padding: 0; 
     (optional) mso-hide: all; 
     /* hide elements in Outlook 2007-2013 */ 
     (optional) 
    } 
    div#sp-header-sticky-wrapper.sticky-wrapper { 
     display: none; 
     visibility: hidden; 
     clear: both; 
     font-size: 0; 
     max-height: 0; 
     line-height: 0; 
     height: 0px !important; 
     padding: 0; 
     (optional) mso-hide: all; 
     /* hide elements in Outlook 2007-2013 */ 
     (optional) 
    } 
}

，並在手機上：

@media (max-width: 991px) { 
    #sp-header-sticky-wrapper { 
     display: block !important; 
     visibility: visible; 
    } 
    div#sp-header-sticky-wrapper.sticky-wrapper { 
     display: block !important; 
     visibility: visible; 
    } 
}

它工作正常，在手機/平板電腦的一部分，但是當涉及到桌面模式。有一個問題。

每當我點擊我的菜單/其他地方的鏈接，它顯示隱藏的div爲0.x秒，然後它隱藏它。它就像白色的盒子顯示它，然後在一段時間後隱藏起來，所以當我重新加載一個頁面時，網站總是「移動」。

最新解決方案？它可能有一個好處，我應該提及它的一個Joomla運行頁面，所以它可能與讀取的CSS文件有關或？

我可以嘗試使用Javascript還是不可能？

來源

2015-10-27 Peter

嘗試設置'顯示：無;'沒有媒體查詢，並與媒體查詢上顯示移動設備。 –

感謝您的回覆。我的問題的答案顯然是我有另一個div顯示（在我的粘性div內）每當我重新加載一個頁面。我不得不隱藏這一點。現在它像魅力一樣工作。感謝回覆的人。 – Peter

首先，這是關於這個最好的文章：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

所有之二：不使用能見度：可見/隱藏，但顯示：無/塊，效果要好得多。

我會把主要的風格是這樣的：

.desktop-div { display: block; } 
.mobile-div { display: none; } 

@media { .desktop-div { display: none; } .mobile-div { display: block; } }

來源

2015-10-27 14:41:39 Kristine

只使用一個媒體查詢：

@media (min-width: 1200px) { 
    #div-name { 
     display: none 
    } 
}

來源

2015-10-27 14:44:06 TT120

隱藏桌面的div並將其顯示在手機中

回答

相關問題