1

在重建投资组合网站时，我正在努力提高响应能力，但我偶然发现了一个问题。你看，我在屏幕顶部有一个导航菜单，但是当在智能手机上查看时，我想将该导航放在屏幕底部。

通常，由于它是一个带有导航元素的标题，fixed位于屏幕的左上角，因此我只会在我的媒体查询中为它提供一个规则（在这种情况下）iPhone。

我会将顶部更改为顶部：无；（我认为无论如何都无效）并添加底部：0; 因此导航菜单的规则将变为bottom: 0;andleft: 0;而不是top: 0;and 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;
}

您还可以在此处查看我正在构建的测试站点：我的测试组合。

我会很感激你的帮助。我敢打赌，以前有人问过这个问题，但是我真的在这里找不到...在此先感谢！

4

1 回答 1

0

一旦您的 css 应用于 @media 屏幕，它将继续并应用 @media 所有。我认为这是造成问题的原因。所以我在正文的页眉和边距顶部添加了 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;
}
于 2013-03-24T10:54:13.290 回答