为什么我的#wrapDesktopNavBar在桌面视图中消失了？

Question

以下是我的css.我不知道为什么当我在dekstop视图上打开我的网站时,我的#wrapDesktopNavBar没有显示.请帮我看一下谢谢:)

@media screen and (min-width: 800px) {  
/* Navigation bar (blank) settings */
#wrapDesktopNavBar  {       

    visibility: visible;                
    width: 100%;                                    /*Sets the width*/
    height: 70px;                                   /*Sets the height*/
    top: 0%;                                        /*Sets the distance from the top*/
    position: relative;                             /*Fixes the bar at the designated position*/
    background-color: #ffffff;                      /*Sets the background color to white*/
    font-family: Helvetica, Arial, sans-serif;      /*Sets the font of the headers*/
    z-index: 1;                                     /*Sets as 1 to be the top layer, bottom layers should use small index number, vice versa*/
}}

#wrapDesktopNavBar  {
    height: 100%;
    background-color: #315AA9;
    position: fixed;
    width:80%;
    top:0%;
    overflow-y:auto;
    overflow-x: hidden;
    visibility: hidden;
    z-index: 100;
}

Answer 1

你@media在CSS 中使用查询,所以上面的代码有两个相同的声明,id所以你需要关闭媒体查询块,以便它排除一般样式块

@media screen and (min-width: 800px) {  
/* Navigation bar (blank) settings */
#wrapDesktopNavBar  {       
    visibility: visible;                
    width: 100%; 
    height: 70px;
    top: 0%;
    position: relative;
    background-color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    z-index: 1;
    } 
} /* Close this here */

/* Other styles goes out of the box */

您的声明顺序很重要,即使满足第一个条件,一般的CSS属性块也会覆盖媒体查询块,为了防止这种情况,只需将媒体查询放在CSS文件的末尾即可.

此外,visibility: hidden;即使您关闭@media查询框并且视口宽度超出800px;您的元素,您也将使用,因此wrapDesktopNavBar将无法看到具有ID的元素.

演示(调整小提琴窗口的大小以查看效果,为演示目的修改媒体查询宽度和颜色)