隐藏桌面的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并将其显示在手机中

回答

相关问题