2

以下是我的css。我不知道为什么当我在桌面视图上打开我的网站时，我的#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;
}
4

1 回答 1

5

您在 CSS 中使用@media查询，因此上述代码有两个相同的声明，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;您的元素，您也将使用它，而具有 id 的元素wrapDesktopNavBar将不可见。

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

于 2013-08-09T20:26:07.423 回答