假设我有
@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
最佳答案
好吧,我假设这里的主要问题是当你的宽度为 360px 时,你的 div 不是位于视口(viewport)的顶部,而是卡在底部?
当你有一个媒体查询时,它仍然继承以前的样式,如果你想否定任何你必须将它们返回到那里的默认值,我相信底部将是自动的。
关于html - CSS 中媒体查询的奇怪行为。从其他语句继承属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30757587/