加载时，移动菜单会在桌面屏幕上短暂显示

Question

首先，我的设计很敏感。

我使用2个不同的菜单，一个用于移动大小的屏幕，另一个用于桌面（＆gt; 768px）大小的屏幕。

如果我使用桌面访问我的页面，移动菜单会短暂显示并消失。如果您访问该页面，它看起来有点不好。

我的css代码：

.menu_right{
    float: left;
    margin-left: 10px;
    width: 215px;
}


@media screen and (max-width: 768px) {
    .menu_right {
        display: none;
        max-width: 100%;
    }
}

解决此问题的任何解决方案？

最好的问候

Answer 1

您可以设置.menu_right显示无，然后使用媒体查询仅显示需要它的屏幕尺寸：

.menu_right{
 float:left;
 margin-left:10px;
 width:215px;
 display: none;
}

@media screen and (max-width: 768px) {
 .menu_right{
  display: block;
 }
}