隐藏div桌面和显示它在电话

Question

我有一个粘性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还是不可能?

Answer 1

首先，这是关于这个的最好的文章:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

第二点:不要用visibility: visible/hidden，而是用display: none/block，效果会更好。

我将把主样式像这样:

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

Answer 2

使用媒体查询:

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