css - 为什么我的#wrapDesktopNavBar 在桌面 View 中消失了？

Question

以下是我的CSS。我不确定为什么当我在 dekstop View 中打开我的网站时，我的#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

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

@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 属性 block 也会覆盖媒体查询 block ，为了防止这种情况发生，只需将媒体查询放在 CSS 文件的末尾即可。

此外，您正在使用 visibility: hidden; 因此即使您关闭了 @media 查询框并且视口(viewport)宽度超过 800px; 具有 id wrapDesktopNavBar 的元素将不可见。

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