html - CSS 中媒体查询的奇怪行为。从其他语句继承属性值

Question

假设我有

@media all and (min-width: 360px) {
    #navigation {
        background-color: #dddddd; 
        display: block; 
        position: fixed; 
        top: 0px;
    }
}
@media all and (min-width: 760px) {
    #navigation {
        background-color: #111111; 
        display: none; 
        position: fixed; 
        bottom: 0px;
    }
}

这种CSS代码(假设我在body标签中有div id="navigation"标签)。

但如果我运行此代码并更改浏览器的大小以查看差异，它不会随着大小的变化而改变。第一个媒体查询语句中的 CSS 属性应用于样式，但 display 属性除外。

如何使其他属性按预期运行？

编辑:这是我元素的代码笔: http://codepen.io/thatkoreanguy/pen/mJwPBW

Answer 1

好吧，我假设这里的主要问题是当你的宽度为 360px 时，你的 div 不是位于视口(viewport)的顶部，而是卡在底部？

当你有一个媒体查询时，它仍然继承以前的样式，如果你想否定任何你必须将它们返回到那里的默认值，我相信底部将是自动的。