响应式网站:移动标题导航从上到下的问题

Question

在重建我正在制作的更具响应性的投资组合网站时，我偶然发现了一个问题。你看，我有一个导航菜单在屏幕的顶部，但我想把导航放在屏幕的底部，当它在智能手机上观看。

通常情况下，因为它是一个带有导航元素的标题，它是屏幕左上角的fixed，我只是在我的媒体查询中给它一个规则(在这种情况下)iphone。

我将top改为top:none;(我认为这是无效的)，并添加一个底部:0;因此，导航菜单的规则将变为bottom: 0;和left: 0;，而不是top: 0;和left: 0;。

奇怪的是，我似乎不能使它正常工作。

下面是我的CSS:

    /* this is inside @media all */
header {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:60px;
    border-bottom:1px solid #108ac2;
    box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
    background:#fff;
    opacity:.9;
}
header nav {
    width:960px;
    margin:0 auto;
}
    /* this is inside @media screen and (max-width: 480px)  */
header {
    position:fixed;
    bottom:0!important;
    left:0!important;
}
header nav {
    width:90%;
    margin:0;
    height:80px;
}

你也可以在这里查看我的测试网站:我的测试作品集。

我很感激你的帮助。我敢打赌以前有人问过这个问题，但我真的在这里找不到……提前感谢!

Answer 1

一旦你的css应用于@media screen，它将继续应用于@media all。我认为这是导致问题的原因。所以我添加了css的顶部和正文的空白，这似乎做的工作。

    /* this is inside @media all */
header {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:60px;
    border-bottom:1px solid #108ac2;
    box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
    background:#fff;
    opacity:.9;
}
header nav {
    width:960px;
    margin:0 auto;
}
    /* this is inside @media screen and (max-width: 480px)  */
header {
    position:fixed;
    bottom:0!important;
    left:0!important;
    top: initial;
}
header nav {
    width:90%;
    margin:0;
    height:80px;
}
body {
    margin:0 0 100px 0;
}